Question

我有一个表格，我有两个选择框，第二个选择框根据第一个选择框更改。两个选择框都是一个数组

例如

<div id="data-container">
<select name="first_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>
<select name="second_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>

<select name="first_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>
<select name="second_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>

<select name="first_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>
<select name="second_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>

</div>

Please see the image for more details

如果我更改了选择框first_select[1]＆＃34;我想更改second_select[1]

的值

如果我更改了选择框first_select[2]＆＃34;我想更改second_select[2]

的值

我可以点击添加更多按钮

添加更多选择框

请参阅图片

Answer 1

以下代码可以帮助您入门：

$(document).on('change', 'select[name="first_select[]"]', function(){
    var currentValue = $(this).val();
    $(this).next('[name="second_select[]"]').val(currentValue);
});

我做的第一件事是捕获已更改的first_select的值。然后我遍历DOM到下一个second_select并更改它的值以匹配第一个。这允许我在不知道或不需要更改select的索引的情况下更改对。

EXAMPLE

此代码还涵盖了您＆＃34;添加更多＆＃34;选择我使用event delegation来确保在冒泡DOM时捕获更改事件。

Attribute Selectors .val() .change() .next()

编辑：OP更改了标记，需要对DOM进行不同的遍历：

给定以下标记，每个下拉列表都在div兄弟姐妹中：

<div>
  <select name="first_select[]">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
  </select>
</div>
<div>
  <select name="second_select[]">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
  </select>
</div>

jQuery必须改为：

$(document).on('change', 'select[name="first_select[]"]', function () {
    var currentValue = $(this).val();
    $(this).closest('div').next('div').find('[name="second_select[]"]').val(currentValue);
});

以下是EXAMPLE

EDIT OP在标记中添加了另一层复杂性。幸运的是，jQuery使这很容易，只有几个选择器需要更改。这是标记：

<div class="col-md-4">
    <div class="form-group">                            
        <label>Designation</label>
        <select name="first_select[]" class="form-control author_designation" required="">      
            <option value="House Surgeon">House Surgeon</option>
            <option value="Medical Officer">Medical Officer</option>
            <option value="Private Practitioner">Private Practitioner</option>
        </select>
    </div>
</div>

<div class="col-md-3">
    <div class="form-group">
        <label>Type</label>
        <select name="second_select[]" class="form-control author_type" >
            <option value="House Surgeon">House Surgeon</option>
            <option value="Medical Officer">Medical Officer</option>
            <option value="Private Practitioner">Private Practitioner</option>
        </select>
    </div>
</div>

jQuery选择器的更改包含.closest()和.next()函数。我使用＆＃34;以＆＃34;开头div上课的选择器：

$(document).on('change', 'select[name="first_select[]"]', function () {
    var currentValue = $(this).val();
    $(this).closest('[class^="col"]').next('[class^="col"]').find('[name="second_select[]"]').val(currentValue);

});

EXAMPLE

Answer 2

在新选择框添加后，为您的选择框提供动态ID和数据ID。

<select id="first_select_1" data-id="1" name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option1</option>
</select>

<select id="second_select_1" name="second_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>
<select id="first_select_2" data-id="2" name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>

<select id="second_select_2"  name="second_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>
<select id="first_select_3" data-id="3" name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>

<select id="second_select_3" name="second_select[]">
 <option value="option1">Option1</option>
 <option value="option2">Option2</option>
</select>

然后将此添加到jquery下面

$(document).ready(function(){
$('select').change(function(){
var data_val =$(this).attr('data-id');  
$('#second_select_'+data_val).val( this.value).change();
})

});

Jquery动态更改选择框值

2 个答案: