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，因此它会绑定事件..

Answer 2

我相信你正在使用bootstrap。你有没有包含bootstrap.js？和jquery一起？

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

试试这个fiddle

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

2 个答案: