javascript更改剩余的下拉值，具體取決於第一個

Question

我的HTML表動態填充其行。 表數據之一是帶有相同選項的下拉列表。 我想做的是，當我更改第一行的值時，其他行上的其余下拉列表將具有一個選定的值，該值與最近選定的值相同。

如果我在第二行上更改選定的值，其余的下拉菜單將類似於第二行，而不會影響第一行的值。 以下是一些代碼：

<table id="CheckDetails" width="60%">
<tr>
<th>Date</th>
<th>Category</th>
<th>Description</th>
<th>Amount</th>
 </tr>
 <tr class="row1">
<td><input name="date1" id="date1" class="" value="22-09-2013" /></td>
<td><select name="category" id="cat0" class="dropdown" >
    <option value="0">[-- Please Choose --]</option>
    <option value="1">References</option>
    <option value="2">Inspirational</option>
    </select>
</td>
<td><input type="text" class="entry" name="desc" id="desc0" value="1"/></td>
<td><input type="text" class="entry" name="amt" value="420.83333333333"/></td>
 </tr>
 <tr class="row1">
<td><input name="date1" id="date1" class="" value="22-09-2013" /></td>
<td><select name="category" id="cat0" class="dropdown" >
    <option value="0">[-- Please Choose --]</option>
    <option value="1">References</option>
    <option value="2">Inspirational</option>
    </select>
</td>
<td><input type="text" class="entry" name="desc" id="desc0" value="1"/></td>
<td><input type="text" class="entry" name="amt" value="420.83333333333"/></td>
 </tr>
 <tr class="row1">
<td><input name="date1" id="date1" class="" value="22-09-2013" /></td>
<td><select name="category" id="cat0" class="dropdown" >
    <option value="0">[-- Please Choose --]</option>
    <option value="1">References</option>
    <option value="2">Inspirational</option>
    </select>
</td>
<td><input type="text" class="entry" name="desc" id="desc0" value="1"/></td>
<td><input type="text" class="entry" name="amt" value="420.83333333333"/></td>
 </tr>

我正在為此項目使用php。 任何幫助表示贊賞。 謝謝！

Answer 1

嘗試

$('select[name="category"]').change(function(){
    var $this = $(this), $nextAll = $this.closest('tr').nextAll('tr').find('select[name="category"]');

    $nextAll.val($this.val())
});

演示： 小提琴