Question

我有多个选择框，如：

<select name="new[]" class="form-control" id="new">

关于更改我想更改它对应的选择框值

<select name="news[]" class="form-control" id="news">

我的更改值的jQuery代码：

$('select[name="new[]"]').on('change', function(){
     var v=$(this).val();
  // alert(v);
     $('select[name="news"]').val(v);

 })

但是在单一选择它工作正常但是当我有多个选择框时，当我改变一个下拉时它会改变所有其他下拉。任何人都可以帮我解决这个问题吗？

Answer 1

从您的代码开始，一切正常，但如果您使用相同的name arb_country[]，那么具有该名称的所有选择框都将更改为避免您在查询选择器中更具体，如包装div中的选择框如下：

$('select[name="eng_country[]"]').on('change', function(){
     var selectedval=$(this).val();
  // alert(selectedval);
     $('.selectboxes select[name="arb_country[]"]').val(selectedval);

 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="selectboxes">
<select name="eng_country[]" class="form-control profile-engform" id="eng_country">
<option value="1">country 1</option>
<option value="2">country 2</option>
<option value="3">country 3</option>
<option value="4">country 4</option>
</select>

<select name="arb_country[]" class="form-control profile-engform" id="arb_country">
<option value="1">country 1</option>
<option value="2">country 2</option>
<option value="3">country 3</option>
<option value="4">country 4</option>
</select>
</div>
<select name="arb_country[]" class="form-control profile-engform" id="arb_country">
<option value="1">country 1</option>
<option value="2">country 2</option>
<option value="3">country 3</option>
<option value="4">country 4</option>
</select>

Answer 2

尝试使用jquery的next()函数。

注意： 您不能拥有多个具有相同html属性的id元素。

＆＃13;

$('select[name="eng_country[]"]').on('change', function(){
     var selectedval=$(this).val();
  // alert(selectedval);
     $(this).next('select[name="arb_country[]"]').val(selectedval);

 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="eng_country[]" class="form-control profile-engform" id="eng_country1">
  <option>Country 1.1</option>
  <option>Country 1.2</option>
  <option>Country 1.3</option>
</select>
<select name="arb_country[]" class="form-control profile-engform" id="arb_country1">
  <option>Country 1.1</option>
  <option>Country 1.2</option>
  <option>Country 1.3</option>
</select>
<br />
<select name="eng_country[]" class="form-control profile-engform" id="eng_country2">
  <option>Country 2.1</option>
  <option>Country 2.2</option>
  <option>Country 2.3</option>
</select>
<select name="arb_country[]" class="form-control profile-engform" id="arb_country2">
  <option>Country 2.1</option>
  <option>Country 2.2</option>
  <option>Country 2.3</option>
</select>
<br />
<select name="eng_country[]" class="form-control profile-engform" id="eng_country3">
  <option>Country 3.1</option>
  <option>Country 3.2</option>
  <option>Country 3.3</option>
</select>
<select name="arb_country[]" class="form-control profile-engform" id="arb_country3">
  <option>Country 3.1</option>
  <option>Country 3.2</option>
  <option>Country 3.3</option>
</select>

＆＃13;

在更改下拉列表中根据第一个下拉列表更改其相对下拉值

2 个答案: