javascript change remaining dropdown values depending on first

Question

My HTML table populates its rows dynamically. One of the table data is a dropdown with thesame options. What I want to do is when I change the value of the first, the remaining dropdowns on the other rows will have a selected value, thesame as what is recently selected.

If I change the selected value on the second row, the rest of the dropdowns will be like the second, without affecting the value of the first. Here are a few codes:

<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>

I am working with php for this project. Any help is appreciated. Thanks!

Arun P Johny · Accepted Answer · 2013-08-26 02:49:15Z

1

Try

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

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

Demo: Fiddle

answered Aug 26, 2013 at 2:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Umpong_1947676 Over a year ago

It works! Thank you so much, my problem now is that the description is supposed to change depending on the selected value. But it doesnt...

Collectives™ on Stack Overflow

javascript change remaining dropdown values depending on first

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related