同一頁面上具有相同功能的多個下拉菜單

Question

我的問題是，如何在同一頁面上為C＃中的相同功能顯示多個下拉菜單。 假設我在一個頁面上有3個面板，我想在所有這三個面板中顯示一個下拉菜單，但是更改一個下拉菜單的值也會導致更改其他下拉菜單的值。 我無法在JS中使用id訪問，因為如果在同一ID的同一頁面上有3個下拉列表，即ID不是唯一的，則Java Script無法執行操作。

Answer 1

只需將相同的類應用於所有下拉菜單，並且在更改所有下拉菜單的值后，請在下面找到代碼段。

 $(".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

您可以為所有三個下拉菜單和通話更改事件分配不同的類別

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

下面是jQuery代碼

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

您也可以使用jsfillde鏈接https://jsfiddle.net/1xzkmbtk/