獲取當前選擇的元素畢竟選擇在一排

比方說，我有一個表像這樣用很行的多個選擇：獲取當前選擇的元素畢竟選擇在一排

<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

獲取當前選擇的元素畢竟選擇在一排

回答

相關問題