Question

假设我有一个这样的表格，其中包含多行选择：

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

Answer 4

对Alnitak解决方案稍作修改就是在表级绑定事件处理程序，这样你最终只能绑定一个函数来完成这项工作：

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

Answer 5

~~我会尝试像~~

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

Answer 6

好的，这很有效，我终于想出了如何做到这一点：

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

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

6 个答案: