2

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

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

小提琴演示

4

3 回答 3

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>

于 2016-06-16T16:03:49.480 回答
1

我正在使用这个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
    });
于 2019-07-06T11:12:27.847 回答
0

触发对隐藏元素的选择是没有用的。
这就是为什么您的下拉菜单没有被选中激活的原因。

正确的方法是在 swal 被触发后触发选择。像下面的示例

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

于 2021-10-01T10:08:18.527 回答