Get all selects after a current select element in a row

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?

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.

There are many jquery plugins that facilitate creating cascading dropdowns, which, in a nutshell, is what you want to achieve.

Here's a google search on "cascading dropdown jquery"; pretty much every result is a jQuery plugin :)

A slight modification of the Alnitak solution would be to bind the event handler on table level instead, so that you end up with only one function bound doing the job:

$('table').change(function(event) {
    $(event.target).parent().nextAll().find('select')...
    event.stopPropagation();
});

This will get you all the selects that are in the same row:

$("table select").change(function(){
    var $select_mates=$('select', $(this).closest('tr'));
});

If you don't want the element itself:

$("table select").change(function(){
    var $me=$(this);
    var $select_mates=$('select', $me.closest('tr')).not($me);
});

My solution uses the jQuery Selector Context.

EDIT: Now I recognized I haven't seen after a current select element :). Let's see:

$("table select").change(function(){
    var $me=$(this);
    var $select_mates=$('select', $me.closest('tr'));
    var $select_after_mates=$select_mates.slice($select_mates.index($me)+1);
});

Ok, this works, I've finally figured out how to do this:

$("table select").change(function(){
    $(this).parent().nextUntil().find("select option:first").attr("selected", "selected");
});

i would try something like

//"obj" being your <select> HTML element
jQuery(obj).parent().find("select").not(obj);

UPDATE

I know the answer is already there but i thought for completeness I'd add a fix:

//"obj" being your <select> HTML element
// .parent().parent() gets the row 
// .find("select" finds all the selects contained somewhere in that row.
// .not(obj) removes your current <select> 

jQuery(obj).parent().parent().find("select").not(obj);