获取行中当前select元素之后的所有选择

Question

假设我有一个这样的表，每一行都有多个selects：

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

我想做的是，当一个select元素发生变化时，我希望在被更改的select元素之后的同一行中获得所有的select元素，并用它们改变一些东西。

因此，如果selectA发生变化，我希望获得selectB和selectC。如果selectB发生变化，我想获取selectC。诸若此类。如何使用jQuery做到这一点呢？

Answer 1

试试这个：

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

例如，获取元素的.parent() (将是<td>)，然后对于它后面的所有同级元素.nextAll()，.find()它们内部的所有<select>元素。

Answer 2

有许多jquery插件可以帮助创建级联下拉菜单，简而言之，这就是您想要实现的目标。

这是谷歌在"cascading dropdown jquery"上的搜索结果；几乎每个结果都是一个jQuery插件:)

Answer 3

这将使您获得同一行中的所有选择：

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

如果不需要元素本身，请执行以下操作：

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

我的解决方案使用jQuery Selector Context。

编辑：现在我意识到我还没见过after a current select element :)。让我们看看：

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