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

在这里我有一个下拉选择“创建新”选项。当用户选择“新建”时，它应该显示模态弹出窗口。基于下拉选择显示模式弹出窗口

这是下拉代码

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

这是我的模态弹出式设计。

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

但不幸的是，如果我选择“新建”，它不会打开一个弹出窗口。这里有什么问题。

来源

2016-04-25 kiran

的问题是，因为使用的是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() {，它不会工作，因为没有elem ent与该id和jquery不能将更改事件绑定到它。

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

1）设置客户端ID模式静态：你的元素，让你留在静态ID。

使此更改到这两个DropDownList控件

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

与此标识将保持原样和jQuery将能够找到它，并绑定change事件。

2）更改您的脚本以使用ClientID。 改变你的Jquery本身使用的ClientID，而不是...象下面

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

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

所以，现在让jQuery的读取正确的ID，所以它结合事件..

来源

2016-04-25 06:39:42

谢谢先生。现在工作正常。 – kiran

@kiran很高兴帮助.. –

嗨，先生，每件事情都很好，但它显示完整的窗口。我想减少弹出窗口的大小。有没有机会减小窗口的大小。 – kiran

我相信你正在使用bootstrap。你有没有包含bootstrap.js？随着jQuery的？

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

，如果你检查你的浏览器的下拉试试这个fiddle

来源

2016-04-25 06:34:01 MohamedSanaulla

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

回答

相关问题