2010-06-01 132 views
1

我在class =「TypeFilter」的頁面上有一個下拉選擇列表。如何選擇兩個下拉選項才觸發事件?

我有一個jQuery事件,當該列表中的值被選中時觸發。

$(".TypeFilter").change(function() 
{ 
    // Extract value from TypeFilter and update page accordingly 
)); 

我現在有另一個列表添加到頁面,我想實現的功能,這將阻止.change(function()運行,除非兩者都選擇。

在這兩個列表在列表中的第一個選項是一些文本,指示用戶選擇的項目之一,所以我想的只是寫一些邏輯來測試兩個列表有選擇的指數大於0

雖然我認爲這是一種觸摸不潔,特別是考慮到其他具有TypeFilter的頁面使用相同的邏輯。

jQuery中是否有任何漂亮的功能可以做到這一點?

編輯我應該指定一個用戶需要能夠通過選擇下拉菜單來更新頁面,所以我不能把平變化的第二個元素和測試的第一個元素有一個選定的值,作爲在其中一個答案中提出

回答

2

如果您將相同的事件綁定到所有下拉列表,則可以獲取所有下拉列表的集合並檢查是否選中了所有下拉列表。例如:

$('.Dropdown').change(function(){ 
    var elements = $('.Dropdown'); 
    if (
    elements.filter(function(){ 
     return this.selectedIndex > 0; 
    }).length == elements.length 
) { 
    // all dropdowns are selected 
    } 
}); 
+0

謝謝你,這真的很漂亮! :-)雖然有一點 - ';)在'})。length == elements.length;'的末尾是錯位的。它不應該在那裏。再次感謝! – DaveDev 2010-06-01 16:19:14

+0

@Dave:是的,你說得對,分號不應該在那裏。 :) – Guffa 2010-06-01 16:30:39

+0

我不想聽起來脾氣暴躁,你不喜歡我的解決方案:),但不是@古法的解決方案正是你想要避免的解決方案? – 2010-06-01 17:35:44

1

正如你部分提到的那樣,將onchange放在第二個元素上,並在關閉任何邏輯之前測試第一個元素是否具有選定的值。

+0

但用戶需要通過更改下拉列表更新頁面的功能。我將更新要指定的問題。謝謝 – DaveDev 2010-06-01 15:38:51

0

bind使用代替,並且作爲EVENTDATA,發送檢查,要麼兩者都選擇或與其它被選擇的功能。未經測試的代碼:

function checker() { 
    // test your conditions 
} 

$(".TypeFilter").bind('change', {test: checker}, function(event) 
{ 
    if (event.data.test && event.data.test()) { 
     // Extract value from TypeFilter and update page accordingly 
    } 
)); 

這樣使用相同功能的其他頁面將不會注意到任何更改。

相關問題