I want to add select boxes to sweet alert, but when i add initialize chosen box container does not show it properly, do you have any suggestions? Here is example

<div id="content">
<select id="chosen-without-empty" class="chosen">
     <option value="2">example</option>
     <option value="3">example 2</option>
 </select>
 <br />

</div>
<br>
<a id="sa-basic">asdasdasdasD</a>

JS

$('#sa-basic').click(function(){
    var s = $('#content').html();
    swal({ html:true, title:'TEST', text:s});
    $('.chosen').chosen({
        width: '50%',
        allow_single_deselect: true
    });
});

Fiddle DEMO

I want to add select boxes to sweet alert, but when i add initialize chosen box container does not show it properly, do you have any suggestions? Here is example

<div id="content">
<select id="chosen-without-empty" class="chosen">
     <option value="2">example</option>
     <option value="3">example 2</option>
 </select>
 <br />

</div>
<br>
<a id="sa-basic">asdasdasdasD</a>

JS

$('#sa-basic').click(function(){
    var s = $('#content').html();
    swal({ html:true, title:'TEST', text:s});
    $('.chosen').chosen({
        width: '50%',
        allow_single_deselect: true
    });
});

Fiddle DEMO

• javascript
• jquery-chosen
• sweetalert

• Where do you reference SweetAlert files in your Fiddle? – Ivan Jovović Commented Jun 5, 2015 at 7:27
• jsfiddle/bco8w0fn – ilya.stmn Commented Jun 5, 2015 at 7:36
• @ilya.stmn Any chance you got this working? I'm hoping to do something similar, but I can't find any other resources. – warder57 Commented Feb 11, 2016 at 19:24

3 Answers 3

I have the same problem. I try to modify your code with current latest version of sweet alert 2.

$('#swal-chosen').click(function(e){
  e.preventDefault();

  // create clone from existing element
  var s = $('#modal-content').clone();
  s.find('.chosen').addClass('swal');

  swal({
    html: s.html(),
    title: 'Please choose',
    preConfirm: function() {
      return new Promise(function(resolve) {
        resolve( $('.chosen.swal').val() );
      });
    }
  }).then(function(result) {
    // reset modal overflow
    $('.swal2-modal').css('overflow', '');
    swal('Your choice is: ' + result);
  });
  
  // allow dropdown overflow
  $('.swal2-modal').css('overflow', 'visible');

  // initialize chosen for cloned element
  $('.chosen.swal').chosen({
    width: '75%',
    allow_single_deselect: true
  });
});

<link href="https://cdnjs.cloudflare./ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/limonte-sweetalert2/4.0.3/sweetalert2.css" rel="stylesheet"/>

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/limonte-sweetalert2/4.0.3/sweetalert2.js"></script>

<div id="modal-content">
  <select class="chosen">
    <option value=""></option>
    <option value="1">example 1</option>
    <option value="2">example 2</option>
    <option value="3">example 3</option>
    <option value="4">example 4</option>
    <option value="5">example 5</option>
    <option value="6">example 6</option>
    <option value="7">example 7</option>
  </select>
</div>

<br><br>

<a id="swal-chosen" href="#">Select Example</a>

I'm using this https://sweetalert.js/guides/ version and just had same problem as you

because i need to stick to sweetalert1 (those version). so i need to do more work to do like you are asking...

well the idea is very simple. you can understand by glance on it. Basically my idea is to create a select on regular HTML then hide it. Then copy the generated chosen to the Sweet Alert, and retrieve the result on the basic select u've created.

I know this is not simple and not efficient :)) But i cant find any other solution in my case (cant upgrade to SweetAlert 2). ment below if you find better solution! i appreciate it!

HTML / Laravel

    // create dynamic users on html and hide it
    <select name="tujuan" id="tujuan-holder" class="hidden chosen-tujuan">
    @foreach ($users as $item)
        <option value="{{ $item->nama }}">{{$item->nama}}</option>
    @endforeach
    </select>

Javascript

    $(document).ready(function(){
        $(".chosen-tujuan").chosen({ //create the chosen
            width: "100%",
        }); 
        $("#tujuan_holder_chosen").addClass("hidden"); // then hide the chosen bar 
    }); // if you dont hide it it will show up on your interface not on your swal

    $(".btn-process").click(function(){
        swal({
            title:"Apakah anda sudah mengirimkannya?",
            text:"Kepada siapa anda mengirimkan Dokumen ini?",
            icon:"warning",
            content: { //here is the element will be
                element:$("#tujuan_holder_chosen").removeClass("hidden")[0] 
            }
        }).then((result)=>{
            alert($("#tujuan-holder").val()); // then retrieve the ouput by collecting the value on your original select, not the chosen, 
        }); // because chosen create a new interface
    });

Triggering chosen select to a hidden element is useless.
That is why your dropdown is not chosen-activated.

The correct way is to trigger chosen after swal has been fired. Like below sample

function PopupSelect() {    
Swal.fire({ 
title: 'Give Kudos',    
html:   
<form method="post" action="/GiveKudosSend">' + 
<div class="form-group" style="text-align: left;">' +   
<label style="font-weight: bold; font-size: 12px;">Who</label><br/>' +  
<select class="form-control input-sm chosen-swal chosen" id="NRPReciever" name="NRPReciever" style="display: initial;" placeholder="Select">' + 
<option disabled selected>Select Recipient</option>'+   
<option value="EmpCode1">empName </option>' +   
<option value="EmpCode2">empName2 </option>' +  
</select><br/><br/>' +  
</div>'+    

<div class="form-group">' + 
<input style="background: #007762 !important; font-size: 13px; color: white; border: none !important; padding: 10px; border-radius: 4px;" class="button button-primary" type="submit" value"Add Give Kudos">'+  
</div></form>', 
showCloseButton: true,  
showCancelButton: false,    
showConfirmButton: false,   
focusConfirm: false,    
allowOutsideClick: false,   
confirmButtonText: '<span></span>', 
cancelButtonText: '<span></span>',  
}); 
//Trigger chosen after swal shown   
$(".chosen-swal").chosen(); 
}