jquery - Show Modal Popup window based on Dropdown selection -

here have dropdown selection "create new" option. when user selects "create new" should display modal popup window.

this dropdown code

<asp:dropdownlist id="dropdownconfigfile"  runat="server" cssclass="selectpicker">     <asp:listitem text="create new" value="1" ></asp:listitem> </asp:dropdownlist> 

here jquery opening popup window,

<script type="text/javascript">     $(function () {          //attach click event dropdownlist         $("#dropdownconfigfile").change(function () {             //get selected valu of dropdownlist             selection = $(this).val();             //if 1 show dialog window. can change condition per need             if (selection == 1) {                 //show modal window                 $('#mymodal').modal('show');            }         });     }); </script> 

this modal popup design.

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

but unfortunately if select "create new" not opening popup. what's wrong here.

the problem because using runat="server"

in code

<asp:dropdownlist id="dropdownconfigfile"  runat="server" cssclass="selectpicker">     <asp:listitem text="create new" value="1" ></asp:listitem> </asp:dropdownlist> 

if inspect dropdown in browser see id changed "ct100_contentplaceholder1_dropdownconfigfile", in script using $("#dropdownconfigfile").change(function () { not work there no element id , jquery cannot bind change event it.

there 2 solutions problem.

1) set client id mode static: elements remain static id.

make changes both dropdownlist control

<asp:dropdownlist id="dropdownconfigfile"  runat="server" clientidmode="static" cssclass="selectpicker"> 

with id remain , jquery able find , bind change event.

2) change script use clientid . change jquery use clientid instead ... below

$("#dropdownconfigfile").change(function () { change to

$("#<%= dropdownconfigfile.clientid %>").change(function () {

so make jquery read proper id , binds event..