optgroup選擇組的標題

Question

我想創建一個包含分組項目的下拉框。它用於我正在使用的數據庫查找HTML表單。有沒有辦法可以選擇組標題，從而選擇該組中的所有項目？例如，如果組標題是「德國汽車」，並且有「奔馳」和「奧迪」這兩個項目，點擊「德國汽車」後，兩家德國汽車公司應該被選中。

Answer 1

如果你給你的選擇課組，你可以選擇課程，然後訪問它的孩子。

$('.german-cars').children(); 

如果這是不可用的替代是有點慢。當你遍歷所有的optgroups並單獨比較他們的文本，然後抓住那些孩子。

編輯：修復選擇器。 而詮：

然後選擇他們點擊你會使用：

$('.german-cars').click(function(e) { 
    e.preventDefault(); 
    $(this).children().attr('selected', 'selected'); 
}); 

假設元素設置爲多個選擇。否則，只有列表中的最後一輛車纔會被選中。

EDIT 2

小提琴：http://jsfiddle.net/mbChZ/25/

這些變化應該工作，你正在尋找的方式。

$(function() { 
    $('select optgroup').mousedown(function(e) { 
     e.preventDefault(); 
     if ($(this).children(':selected').length == $(this).children().length) { 
      $(this).children().attr('selected', null); 
     } else { 
      $(this).children().attr('selected', 'selected'); 
     } 
    }); 
    $('select option').mousedown(function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     $(this).attr('selected', ($(this).is(':selected'))? null : 'selected');      
    }); 
});​ 

我已經改變了事件的mousedown，所以我們可以看到元素的狀態之前的瀏覽器已經處理的mousedown事件。這使我們能夠檢查它們是否全部被選中，如果是，則取消選擇而不是選擇。並且option的點擊事件也必須完成，以防止該事件傳播。

雖然您可能想要確保它在較早的IE瀏覽器中運行，但如果您支持它，我並不是百分之百的確定瀏覽器兼容性。

Answer 2

沒有任何可靠的方式。 optgroup僅用於分組選項，而不影響功能。但是您可以使用一組複選框而不是select元素，然後您可以選擇「德國汽車」複選框，例如在其下面縮進，用於不同德國車型的複選框。

然後，您可以通過各種方式處理此問題。您可以處理服務器端的情況，這樣如果「德國汽車」已被選中，表單處理程序的行爲就好像選擇了德國汽車的每個複選框。或者，您還可以爲「德國汽車」複選框設置一個客戶端處理程序，以便檢查它是否檢查單個複選框（但是如果未選中，應該取消選中它們）？