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

时间:2015-10-01 14:55:18

标签: jquery twitter-bootstrap

如何使用<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 以获得更好的说明。

1 个答案:

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

Fiddle