Bootstrap - 如何使用select中的选项显示模态框？

Question

如何在Bootstrap上启用模式框使用<option>从<select>我尝试默认方式但它不起作用.

$('#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>

请参阅我的示例以获得更好的说明.

Answer 1

仍然不确定为什么OP坚持提问无法工作,我可以看到它的工作可能是我今天有太多的咖啡:)

快速解决方案是<select>在HTML中分配id<select class="form-control" id="myselect">

<select class="form-control" id="myselect">
    <option value="">select</option>
    <option value="secondoption">Second Option</option>
</select>

添加value在select选择和利用jQuery的切换功能获取value第二个选项,并使用比较操作符 来比较值,如果值true,可以打开该模式引导JS莫代尔通过JavaScript.

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

小提琴