javascript - 将选择添加到甜蜜警报

Question

我想将选择框添加到甜蜜警报中，但是当我添加初始化选择框容器时没有正确显示它，您有什么建议吗？ 这是示例

<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

Answer 1

我也有同样的问题。我尝试使用当前最新版本的 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.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/4.0.3/sweetalert2.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>