根据下拉选择显示模态弹出窗口

Question

这里我有一个带有"新建"选项的下拉选项.当用户选择"新建"时,它应显示"模态弹出窗口".

这是下拉代码

<asp:DropDownList ID="DropDownConfigFile"  runat="server" CssClass="selectpicker">
    <asp:ListItem Text="Create New" Value="1" ></asp:ListItem>
</asp:DropDownList>

这是打开弹出窗口的Jquery,

<script type="text/javascript">
    $(function () {

        //Attach click event to your Dropdownlist
        $("#DropDownConfigFile").change(function () {
            //Get the selected valu of dropdownlist
            selection = $(this).val();
            //If its one then show the dialog window. You can change this condition as per your need
            if (selection == 1) {
                //Show the modal window
                $('#myModal').modal('show');
           }
        });
    });
</script>

这是我的Modal弹出式设计.

<div id="myModal" class="modal fade">
    <asp:Panel ID="Panel1" runat="server"  align="center" style = "display:contents ">
        <table class="table table-hover small-text" id="tb" border="1">
        <thead>
          <tr>
        <%--<td class="col-md-4">Index Position</td>--%>
              <th style="BACKGROUND-COLOR: DarkGrey ">Index Position</th>
              <th style="BACKGROUND-COLOR: DarkGrey ">Alpha-Numeric Scramble</th>
              <th style="BACKGROUND-COLOR: DarkGrey ">Packed-Decimal Scramble</th>
        <%--<td class="col-md-4">Type of Scramble</td>
        <td class="col-md-4">Scrambling Required</td>--%>
         </tr>
       </thead>
</div>

但不幸的是,如果我选择"新建",则不会打开弹出窗口.这里有什么不对.

Answer 1

问题是因为你正在使用 runat="server"

在这段代码中

<asp:DropDownList ID="DropDownConfigFile"  runat="server" CssClass="selectpicker">
    <asp:ListItem Text="Create New" Value="1" ></asp:ListItem>
</asp:DropDownList>

如果您检查浏览器中的下拉列表,您将看到其ID已更改为"ct100_ContentPlaceHolder1_DropDownConfigFile",因此在您使用的脚本中$("#DropDownConfigFile").change(function () {,由于没有具有该ID的元素,因此jquery无法将更改事件绑定到该脚本.

这个问题有2个解决方案.

1) 将客户端ID模式设置为静态:到您的元素,以便保留静态ID.

对DropDownList控件进行此更改

<asp:DropDownList ID="DropDownConfigFile"  runat="server" ClientIDMode="Static" CssClass="selectpicker">

有了这个,Id将保持原样,Jquery将能够找到它并绑定更改事件.

2) 更改脚本以使用ClientID. 改变你Jquery本身改为使用ClientID ......如下所示

$("#DropDownConfigFile").change(function () { 将此更改为

$("#<%= DropDownConfigFile.ClientID %>").change(function () {

所以现在让Jquery读取正确的ID,因此它绑定事件..