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()) 
}); 

演示：Fiddle