我想在甜蜜警报中添加选择框,但是当我添加初始化时,选择的盒子容器没有正确显示,你有什么建议吗? 这是示例
<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
});
});
答案 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
});