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

Get all selects after a current select element in a row

本文关键字：元素 选择 之后 有选择 一行 获取      更新时间：2023-09-26

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

<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插件可以方便地创建级联下拉菜单，简单地说，这就是你想要实现的。

这是一个谷歌搜索"层叠下拉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);
相关文章：