如何使用<option>
中的<select>
在Bootstrap上启用模态框我尝试了默认方式,但它无效。
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
});
<select class="form-control">
<option>select</option>
<option data-toggle="modal" data-target="#myModal">Second Option</option>
</select>
请参阅我的 example 以获得更好的说明。
答案 0 :(得分:6)
仍然不确定为什么OP坚持提问无法在我能看到工作的地方工作可能是我今天喝了太多咖啡:)
快速解决方案是在HTML <select>
<select class="form-control" id="myselect">
分配ID
<select class="form-control" id="myselect">
<option value="">select</option>
<option value="secondoption">Second Option</option>
</select>
在value
个选项中添加select
并利用第二个选项的jQuery Change Function获取value
并使用Comparison Operators
比较值和值true
,可以通过JavaScript打开带有Bootstrap JS Modal的模态。
$(document).ready(function(){ //Make script DOM ready
$('#myselect').change(function() { //jQuery Change Function
var opval = $(this).val(); //Get value from select element
if(opval=="secondoption"){ //Compare it and if true
$('#myModal').modal("show"); //Open Modal
}
});
});