同一页面上具有相同功能的多个下拉菜单

Question

My question is how can I display more than one drop downs on same page for same functionality in C#. Let's say I have 3 panels on a page, I want to show a drop down in all three panels but changing the value of one drop down will cause changing the values of others too. I can't use id access in JS because if there are 3 drop downs on same page of same ID ie ID is not unique then Java Script can't perform actions.

Answer 1

Just apply same class to all dropdowns and on change of any of dropdown set that value to all dropdowns please find snippet below.

 $(".selectclass").on("change",function(){ $(".selectclass").val($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selectclass"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select class="selectclass"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select class="selectclass"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

Answer 2

You can assign different Class all three dropdown and call change event

  <select id="ddlUnquie" class="one" >
<option value="firstvalue">first dropdown text</option>
<option value="firstsecond">first second text</option>
</select>
 <br>
<br>
  <select id="ddlUnquie" class="two" >
  <option value="firstvalue">first dropdown text</option>
<option value="firstsecond">first second text</option>
</select>
<br>
<br>
 <select id="ddlUnquie" class="three" >
<option value="firstvalue">first dropdown text</option>
<option value="firstsecond">first second text</option>
</select>

Below is Jquery code

$(".one").change(function()
  {
    alert($(this).val());
  })
   $(".two").change(function()
    {
    alert($(this).val());
   })
  $(".three").change(function()
     {
       alert($(this).val());
    })

Also you can use jsfillde link https://jsfiddle.net/1xzkmbtk/