添加选择甜蜜警报

时间:2015-06-05 06:55:51

标签: javascript jquery-chosen sweetalert

我想在甜蜜警报中添加选择框,但是当我添加初始化时,选择的盒子容器没有正确显示,你有什么建议吗? 这是示例

<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

2 个答案:

答案 0 :(得分:2)

我有同样的问题。我尝试使用当前最新版本的甜蜜警报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>

答案 1 :(得分:0)

我正在使用此https://sweetalert.js.org/guides/版本,与您遇到的问题相同

因为我需要坚持sweetalert1(那些版本)。所以我需要做更多工作来做,就像你在问...

这个想法很简单。一眼就可以理解。 基本上,我的想法是在常规HTML上创建一个选择,然后将其隐藏。然后将生成的所选内容复制到Sweet Alert,并在您创建的基本选择上检索结果。

我知道这并不简单,效率也不高:))但是我找不到任何其他解决方案(无法升级到SweetAlert 2)。如果您找到更好的解决方案,请在下面评论!我很感激!


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
    });