基于下拉选择的显示模式弹出窗口

Question

这里有一个带有"Create“选项的下拉选项。当用户选择"Create“时，它应该显示Modal弹出窗口。

这是下拉代码

<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>

但是不幸的是，如果我选择"Create“，它不会打开弹出窗口。这是怎么回事。

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无法将更改事件绑定到它。

对于这个问题有两种解决方案。

1) 将客户端id模式设置为静态：to您的元素，以便保留静态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，从而绑定事件。

Answer 2

我相信你用的是引导。你包括bootstrap.js了吗？和jquery一起？

$("#select-me").on('change', function() {
  //alert($(this).val());
  if ($(this).val() == 1) {
    $("#myModal").modal('show');
  }
});

试试这个小提琴