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?Un modo semplice per selezionare rapidamente un intero gruppo di selezione nella casella di selezione
risposta
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.
jquery:
$('#myoptgroup option').attr('selected', true);
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
.
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 ...
- 1. redirect su selezionare l'opzione nella casella di selezione
- 2. Casella di selezione scrivibile
- 3. Convalida casella di selezione
- 4. C'è un modo per selezionare una casella di selezione aperta in css?
- 5. jQuery/Seleziona in modo programmatico un'opzione nella casella di selezione
- 6. Come verificare se esiste un valore nella casella di selezione
- 7. Selezione casella di selezione con jQuery
- 8. Nightwatch per selezionare l'opzione dalla casella di selezione
- 9. JQuery aggiornare casella di selezione
- 10. Miglior metodo di selezione della casella per un clone Minecraft
- 11. Modifica delle opzioni nella casella di selezione in base a diverse opzioni di selezione
- 12. allineamento verticale del testo nella casella di selezione - problema firefox
- 13. Come selezionare la casella di selezione scelta jquery
- 14. SQL query di selezione gruppo
- 15. Prime datatable con selezione casella di selezione SOLO
- 16. Grails g: selezionare nessuna selezione
- 17. Selezione di un gruppo di date in SQL Server
- 18. Semplice selezione SQL in C#?
- 19. Come preselezionare l'opzione nella casella di selezione usando jQuery
- 20. Rails Activeadmin - associazione personalizzato casella di selezione
- 21. Selezione di un oggetto JSON con due punti nella chiave
- 22. Selezione interattiva di serie in un grafico matplotlib
- 23. Casella multiselect con Optgroup: selezionare uno per gruppo
- 24. Inserisci sottoquery nella query di selezione
- 25. Come modificare lo stile di una casella di selezione 'etichetta gruppo opt
- 26. Un team di selezione automatica
- 27. Selezione di UITableViewCell AccessoryView, separato dalla riga di selezione
- 28. $ ("# selezionare l'opzione: secondo"). Val (jQuery) - Conservare selezionare secondo valore della casella di selezione dell'opzione
- 29. Imposta l'opzione selezionata della casella di selezione
- 30. Intervallo di anni in JavaScript per una casella di selezione
Hmm stavo cercando di trovare una soluzione senza jQuery. Ma guardando il modo semplice per farlo; e l'altro lato: attraversando la dom .... Jquery è. – blub
@blub - Penso che molte persone entrino in jQuery in questo modo. ;-) –
Attraversare il DOM da soli non è terribilmente difficile, ma un framework rende tutto più semplice. 'document.getElementById ('selectElementID')' ti darebbe l'elemento select stesso. Quindi è solo questione di attraversare i propri figli oppure è possibile aggiungere un listener di eventi per catturare l'evento selezionato e analizzarlo se si tratta del gruppo di scelta desiderato. Se è così, allora dovresti attraversare i figli di optgroup e selezionarli. –