Bootstrap Modals在bootstrap-select插件中

时间:2014-07-21 16:45:29

标签: jquery css twitter-bootstrap

我正在使用 bootstrap-select 插件作为我的下拉菜单。

我试图添加bootstrap Modal下拉列表中的一个选项。 例如:

<select class="selectpicker" data-live-search="true" data-size="false" >
       <option>Team Lead</option>
       <option>Juniour Employee</option>
       <option>Intern</option>
       <option>Director</option>
       <option role="button" data-toggle="modal" data-target="#seg-Seniority">Add/Edit Categories..</option>

 </select>

但是当我点击ADD / EDIT时,似乎调用模态的时间不会到来。如果单击ADD / EDIT,弹出窗口会出现吗?

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

我认为你能做的唯一方法是通过change方法进行选择。

我将此选为<option data-dismiss="true" data-target="#confirm">Hide modal</option>

这是我的剧本

$('.selectpicker').on('change', function () {
    var selectedOption = $(this).find(":selected");
    // this hides a modal
    if (selectedOption.data('dismiss')) {
        $(selectedOption.data('target')).modal('hide');
    }
    // this shows a modal
    if( selectedOption.data('modal') ){
        $(selectedOption.data('target')).modal('show');
    }
});

DEMO

希望这有帮助