ドロップダウン選択に基づいてモーダルポップアップウィンドウを表示

Question

ここでは、「新規作成」オプション付きのドロップダウン選択があります。ユーザーが「Create New」を選択すると、Modal Popupウィンドウが表示されます。

これは、ドロップダウンコード

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

であるここでは、

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

これは私のモーダルポップアップのデザインで、ポップアップウィンドウを開くためのjQueryです。

<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

をお試しください"ct100_ContentPlaceHolder1_DropDownConfigFile"に、あなたのスクリプトでは$("#DropDownConfigFile").change(function() {を使用しています。これは、elemが存在しないため動作しませんそのidとjqueryで変更イベントをバインドすることはできません。

この問題の解決策は2つあります。

1）は静的へのクライアントIDモードを設定します。あなたの要素にあなたは、静的なIDで残るように。これはこれで、両方のあなたのDropDownListコントロール

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

に変更

メイクは、IDがあるとして残るとjQueryは、それを見つけると、変更イベントをバインドすることができます。

2）スクリプトを変更してClientIDを使用します。あなたはjQueryの自体の代わりにClientIDを使用する 変更は...

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

への変更、これを$("#DropDownConfigFile").change(function() {

以下のようにだから今jQueryの適切なIDを読み、それがイベントをバインドします。..

Answer 2

私はあなたがブートストラップを使用していると信じています。あなたはbootstrap.jsを含んでいますか？ jqueryと一緒に？

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

ブラウザのドロップダウンを調べる場合は、このコードではrunat="server"

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

を使用しているため問題はありますが、そのIDが変更表示されます。このfiddle