javascript - 更改下拉列表时根据第一个下拉列表更改其相对下拉值

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>