在一排当前选择元素之后获取所有选择

问题描述

假设我有一个这样的表，其中每一行都有多个选择：

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

我想做的是，当选择元素发生更改时，我想在更改后的选择元素之后获取同一行中的所有选择元素，并对其进行更改。 因此，如果selectA发生更改，我想获取selectB和selectC。如果selectB更改，我想获取selectC。等等。 jQuery如何做到这一点？

解决方法

尝试这个：

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

即取元素的

.parent()

（将为

<td>

），然后对于其后续所有同级元素

.nextAll()

，

.find()

中的所有

<select>

元素。,简而言之，这是您要实现的许多jquery插件，可帮助创建级联下拉列表。 这是Google在“级联下拉式jQuery”上的搜索；几乎每个结果都是一个jQuery插件:),Alnitak解决方案的略微修改是将事件处理程序绑定在表级别，因此最终只能绑定一个函数来完成工作：

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

,这将为您提供同一行中的所有选择：

$(\"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选择器上下文。 编辑：现在我认识到我还没有看到

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

,好的，这行得通，我终于弄清楚了如何做到这一点：

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

,我会尝试像

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

更新 我知道答案已经存在，但出于完整性考虑，我想添加一个修复程序：

//\"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);