Question

Let’s say I have a table like this with multiple selects in very row:

<table>
<tr>
<td>
<select name="selectA" id="selectA">
....
</select>
</td>
<td>
<select name="selectB" id="selectB">
....
</select>
</td>
<td>
<select name="selectC" id="selectC">
....
</select>
</td>
</tr>
<tr>
<td>
<select name="selectA2" id="selectA2">
....
</select>
</td>
<td>
<select name="selectB2" id="selectB2">
....
</select>
</td>
<td>
<select name="selectC2" id="selectC2">
....
</select>
</td>
</tr>
<tr>
<td>
<select name="selectA3" id="selectA3">
....
</select>
</td>
<td>
<select name="selectB3" id="selectB3">
....
</select>
</td>
<td>
<select name="selectC3" id="selectC3">
....
</select>
</td>
</tr>
</table>

What I want to do is, when a select element changes, I want to get all select elements in the same row after the changed select element and change something with them as well.

So if selectA changes, I want to get selectB and selectC. If selectB changes, I want to get selectC. And so on. How to do that with jQuery?

Answer 1

Try this:

$('select').change(function() {
    $(this).parent().nextAll().find('select')...
});

i.e. take the element’s .parent() (which will be the <td>), then for all of its following siblings .nextAll(), .find() all <select> elements within them.