通过jquery onchange选择选项打开模态窗口

时间:2014-06-04 08:27:05

标签: javascript jquery jquery-ui user-interface

如何通过jquery onchange选择选项???

打开模型窗口

Modal窗口代码在这里:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal" style="display:none" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
       Some Contents here..         
    </div>
  </div>
</div>

选择代码选项在此处:

<select id="selectbox">
    <option value="0">- Select -</option>
    <option value="1">yes</option>
    <option value="2">No</option>
</select>

4 个答案:

答案 0 :(得分:7)

首先,您需要抓住jQuery UI dialog并将其放入(document).ready处理程序中。

$('#dialog-modal').dialog({
    modal: true,
    autoOpen: false
});

之后,您定义一个在.change()上显示的函数,它应该打开对话框:

$('select').change(function () {
    $('#dialog-modal').dialog('open');
});

要说它应该在&#39;是&#39; 上打开,只需输入一个代表&#39;是&#39; 选项的if语句:

if ($(this).val() == "1") {
//...code...
}

DEMO

答案 1 :(得分:4)

使用Jquery UI和.change。

$(document).ready(function(){
$("#selectbox").change(function(){

   $("#dialog").dialog({
            title: "jQuery Dialog Popup",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
        return false;


});
});

http://plnkr.co/edit/CBKQcuHKH8uMXQVkySC8?p=preview

答案 2 :(得分:1)

使用select的change()事件,

$("#selectbox").change(function () {
    if ($(this).val() == "1") {
        var options = {
            "backdrop": "static"
        }
        $("#myModal").modal(options);
    }
});

答案 3 :(得分:1)

使用此代码:

$("#selectbox").change(function () {
    if ($(this).val() == "1") {
        $('#myModal).modal('show');
      }
 })