Un modo semplice per selezionare rapidamente un intero gruppo di selezione nella casella di selezione

Question

Ho una casella di selezione in cui posso selezionare più opzioni. Nella casella di selezione sono più opt-group. C'è un modo semplice per selezionare un intero optic in una sola volta in javascript?

Answer 1

Io suggerisco di usare jQuery (o un altro quadro) per gestire in modo rapido le selezioni DOM. Dare a ciascun opticin una classe per renderlo più facile da afferrare.

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

Se si desidera selezionare l'intero gruppo in base all'utente la selezione del gruppo, effettuare le seguenti operazioni:

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

** Entrambi gli esempi sono pseudo-codice non testato, ma dovrebbe funzionare con il minimo modifiche, se necessario.

Se non è possibile utilizzare un framework, è necessario attraversare il DOM da soli per trovare optgroup e figli. È possibile allegare un listener all'elemento select per afferrare l'elemento selezionato e quindi passare anche ai bambini.

Answer 2

jquery:

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

Answer 3

Normalmente sono contrario all'uso di jQuery per lavori semplici come questo, ma posso vedere il suo valore qui. Eppure, se si preferisce una soluzione non jQuery che avrà i vantaggi dell'utilizzo di nessuna libreria, introducendo non ids spuri o classi e correre più veloce, qui è uno:

<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"> 

Se il <optgroup> dispone di un ID che si poteva fare via con la funzione selectOptGroup e basta passare direttamente il gruppo opt in selectOptGroupOptions.

Answer 4

Stavo cercando di fare qualcosa di simile proprio ora.

Desidero selezionare uno <option> s <option> s facendo clic sull'etichetta del gruppo. Il primo tentativo è andato in questo modo:

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

Questa soluzione ha funzionato a metà ...

Facendo clic sull'etichetta 's la <optgroup> tutti i suoi figli divenne selezionato.

MA quando semplicemente cliccando un <option> è stato ancora selezionato tutte le altre <option> s nel gruppo! Il problema era il bubbling degli eventi, perché lo <option> si trova all'interno dello <optgroup> tecnicamente anche facendo clic su di esso.

Quindi il pezzo finale del puzzle era sopprimere l'evento che ribolliva verso l'alto nel caso in cui fosse stato fatto clic su uno <option>. La soluzione finale divenne quindi:

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

Lavoro fatto!

EDIT

esasperante questo non funziona il lavoro in IE8 (e dubbioso < IE8 -? Forse IE9) ...

Decide di ignorare completamente gli eventi di clic su entrambi e gli elementi. L'unica alternativa che posso pensare è posizionare gli elementi sopra le etichette optgroup per catturare il clic, ma probabilmente non ne vale la pena ...