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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32890685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:13:37  来源:igfitidea点击:

Bootstrap - How to show modal box using option from select?

jquerytwitter-bootstrap

提问by brunodd

How can I enable modal box on Bootstrap using <option>from <select>I tried the default way but it's not working.

如何在 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>

See my examplefor a better clarification.

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

回答by Shehary

Still not sure why OP insisting fiddle in question not working where I can see it's working may be I have too much coffee today :)

仍然不知道为什么 OP 坚持有问题的小提琴不起作用,我可以看到它正在工作,可能是我今天喝了太多咖啡:)

Quick solution is assign id to <select>in HTML <select class="form-control" id="myselect">

快速解决方案是<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>

Add valuein selectoptions and taking advantage of jQuery Change Functionget valueof Second Option and use Comparison Operatorsto compare value and if value true, can open the modal with Bootstrap JS Modalvia JavaScript.

添加valueselect选项,并趁着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
        }
    });
});

Fiddle

小提琴