基於下拉選擇顯示模式彈出窗口

在這裏我有一個下拉選擇「創建新」選項。當用戶選擇「新建」時，它應該顯示模態彈出窗口。基於下拉選擇顯示模式彈出窗口

這是下拉代碼

<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

基於下拉選擇顯示模式彈出窗口

回答

相關問題