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

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/