Łatwy sposób na szybkie wybranie całej grupy optycznej w polu wyboru

Question

Mam pole wyboru, w którym mogę wybrać wiele opcji. W polu wyboru znajdują się różne grupy optyczne. Czy istnieje prosty sposób na wybór całej grupy optycznej jednocześnie w javascript?

Answer 1

Proponuję przy użyciu jQuery (lub innego ram) szybko obsłużyć DOM zaznaczeń. Daj każdej grupie optycznej klasę, aby ułatwić jej przechwycenie.

$("optgroup.className").children().attr('selected','selected'); 

Jeśli chcesz zaznaczyć całą grupę opartą na użytkownika Wybór grupy, wykonaj następujące czynności:

$("optgroup.className").select(function(e) { 
    $(this).children().attr('selected','selected'); 
}); 

** Oba przykłady są niesprawdzone pseudo-code, ale powinny one pracować z minimalnym zmiany, jeśli to konieczne.

Jeśli nie możesz użyć ramki, będziesz musiał przejść przez DOM, aby znaleźć grupę opcyjną i dzieci. Możesz dołączyć detektor do elementu select, aby pobrać wybrany element, a następnie przejść do dzieci w ten sposób.

Answer 2

jQuery:

$('#myoptgroup option').attr('selected', true); 

Answer 3

Zazwyczaj nie używam jQuery do prostych zadań, takich jak ta, ale widzę tutaj jej wartość. Mimo to, jeśli wolisz rozwiązanie non-jQuery, który będzie miał korzyści z używania żadnej biblioteki, wprowadzając żadnych fałszywe identyfikatory lub klas i działa szybciej, tutaj jest jeden:

<script type="text/javascript"> 

function selectOptGroupOptions(optGroup, selected) { 
    var options = optGroup.getElementsByTagName("option"); 
    for (var i = 0, len = options.length; i < len; i++) { 
     options[i].selected = selected; 
    } 
} 

function selectOptGroup(selectId, label, selected) { 
    var selectElement = document.getElementById(selectId); 
    var optGroups = selectElement.getElementsByTagName("optgroup"); 
    var i, len, optGroup; 
    for (i = 0, len = optGroups.length; i < len; i++) { 
     optGroup = optGroups[i]; 
     if (optGroup.label === label) { 
      selectOptGroupOptions(optGroup, selected); 
      return; 
     } 
    } 
} 

</select> 

<select id="veg" multiple> 
    <optgroup label="roots"> 
     <option>Swede</option> 
     <option>Carrot</option> 
     <option>Turnip</option> 
    </optgroup> 
    <optgroup label="leaves"> 
     <option>Spinach</option> 
     <option>Kale</option> 
    </optgroup> 
</select> 

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots"> 

Jeśli Twój <optgroup> ma identyfikator można zrobić z funkcją selectOptGroup i po prostu przekaż grupę optyczną prosto do selectOptGroupOptions.

Answer 4

Próbowałem zrobić coś podobnego właśnie teraz.

Po wybraniu etykiety grupy chciałem wybrać <optgroup> s. <option>. Pierwsza próba poszła tak:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

Rozwiązanie to połowa pracowała ...

Po kliknięciu etykiecie <optgroup> „s wszystkich swoich dzieci został wybrany.

ALE po prostu kliknięcie <option> to wciąż wybraniu wszystkich innych <option> S w grupie! Problem polegał na bulgotaniu zdarzeń, ponieważ <option> jest w środku, więc technicznie to też klikasz.

Dlatego ostatnim elementem układanki było powstrzymanie zdarzenia przepuszczającego w górę w przypadku kliknięcia przycisku <option>. Ostateczne rozwiązanie stało się następujące:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

$('select > optgroup > option').click(function (e) { 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
}); 

Job done!

EDIT

infuriatingly to nie zadziała pracę w IE8 (i wątpliwe < IE8 - może IE9) ...

Decyduje się całkowicie ignorować zdarzenia kliknięcia w obu elementach. Jedyną alternatywą, którą mogę wymyślić jest umieszczenie elementów powyżej etykiet grupy optycznej, aby uchwycić kliknięcie, ale prawdopodobnie nie jest to warte wysiłku ...