获取当前选择的元素毕竟选择在一排

比方说，我有一个表像这样用很行的多个选择：获取当前选择的元素毕竟选择在一排

<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元素，并对它们进行更改。

因此，如果selectA发生变化，我想要selectB和selectC。如果selectB改变，我想获得selectC。等等。如何用jQuery做到这一点？

来源

2011-04-20 Richard Knop

试试这个：

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

即采取元素的.parent()（这将是<td>），那么对于所有的下面的兄弟姐妹.nextAll()，.find()内他们都<select>元素。

来源

2011-04-20 06:59:47 Alnitak

有很多jquery插件可以方便地创建级联下拉，简而言之，就是你想要实现的。

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

来源

2011-04-20 06:44:12

我想做到这一点不一个插件。 nextUntil（）或其他函数不可能吗？基本上我想要做的是当一个select元素改变时，为同一行之后的所有select元素选择第一个选项。 – 2011-04-20 06:48:07

好吧，你似乎知道你的问题的答案:)我不知道'nextUntil（）'，但它看起来像一个很好的候选人。它与jQuery选择器，你有麻烦吗？ – 2011-04-20 06:51:53

嗯，是的。但我想我已经明白了。我发布了一个aswer。它似乎工作。 – 2011-04-20 06:57:17

~~我会尝试像~~

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

UPDATE

我知道答案是已经存在，但我认为对于完整性我想补充一个修正：

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

来源

2011-04-20 06:55:23

这只会在同一个'td'中找到'select's。 – kapa 2011-04-20 07:18:04

啊你的权利我应该一直在寻找父母''第一！ – 2011-04-20 23:20:11

好吧，这个作品，我终于想通了，如何做到这一点：

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

来源

2011-04-20 06:56:45

不是选择器应该用作'nextUntil（）'参数吗？为什么额外的“发现”？ – 2011-04-20 07:01:31

在技术上你想''.nextAll（）'而不是'.nextUntil（）'，尽管后者的无参数版本是等价的 - 请参阅我的答案。 – Alnitak 2011-04-20 07:03:18

这意味着每个选择将被绑定到事件处理程序。我宁愿在tr元素上绑定一个监听器，然后使用event.target属性匹配下一个选择。 – 2011-04-20 07:03:24

这将让你所有可在同一行中的选择：

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

来源

2011-04-20 06:59:25 kapa

的参宿一方案的轻微的修改是在表级别的事件处理程序绑定代替，让你最终势必做的工作只有一个功能：

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

来源

2011-04-20 07:12:06

获取当前选择的元素毕竟选择在一排

回答

相关问题