L'aggiunta di optgroups per selezionare dinamicamente utilizzando JavaScript
-
18-09-2019 - |
Domanda
Ho un popolato dinamicamente (da ajax) select box con opzioni come quella risultante:
<select id="destination" name="destination">
<option value="london-paris">London-Paris</option>
<option value="paris-london">Paris-London</option>
<option value="london-newyork">London-New-York</option>
<option value="newyork-london">New-York-London</option>
<option value="london-berlin">London-Berlin</option>
<option value="berlin-london">Berlin-London</option>
<option value="london-helsinki">London-Helsinki</option>
<option value="helsinki-london">Helsinki-London</option>
... ci sono in realtà più di loro, ma non l'essenza
La cosa che voglio è quello di raggruppare ogni questi due porzioni di opzione da parte optgroup utilizzando Javascript (utilizzando jQuery o Mootools forse) dopo l'elenco è stato caricato, in modo che prima di ogni di questo gruppo - aggiungiamo un tag optgroup con etichetta che otteniamo dalla seconda html possibilità del gruppo (in realtà la parola prima del trattino):
<select id="destination" name="destination">
<optgroup label="Paris">
<option value="london-paris">London-Paris</option>
<option value="paris-london">Paris-London</option>
</optgroup>
<optgroup label="New-York">
<option value="london-newyork">London-New-York</option>
<option value="newyork-london">New-York-London</option>
</optgroup>
<optgroup label="Berlin">
<option value="london-berlin">London-Berlin</option>
<option value="berlin-london">Berlin-London</option>
</optgroup>
<optgroup label="Helsinki">
<option value="london-helsinki">London-Helsinki</option>
<option value="helsinki-london">Helsinki-London</option>
</optgroup>
</select>
Anche se, ci sono sempre due destinazioni in ogni gruppo.
, la consulenza come implementare questa Grazie in anticipo.
Soluzione
È possibile farlo in posizione utilizzando jQuery:
$(document).ready(function() {
var select = $('#destination');
var opt1, opt2;
$('option', select).each(function(i) {
if (i % 2 === 0) {
opt1 = $(this);
} else {
opt2 = $(this);
var label = opt1.text().replace('London-', '');
var optgroup = $('<optgroup/>');
optgroup.attr('label', label);
opt2.add(opt1).wrapAll(optgroup);
}
});
});
Questo codice itera su tutte le opzioni nel tag select, e avvolge ogni serie di due in un optgroup. Si capisce anche che cosa per etichettare i optgroup come, in base al testo nelle opzioni.
Altri suggerimenti
Questo non è troppo difficile, avete solo bisogno di muoversi le opzioni un po '. Portarli fuori dal flusso dei documenti, aggiungere un optgroup al posto delle due opzioni associate e aggiungere le opzioni per quel optgroup.
Supponendo che le opzioni sono in realtà sequenziale, come nel tuo esempio, una possibile, buona implementazione vecchio DOM scripting è la seguente:
var destinationSelect = document.getElementById("destination");
var options = destinationSelect.getElementsByTagName("option");
var optgroups = [];
while(options.length > 0) {
var option1 = options[0];
var option2 = options[1];
var optgroup = document.createElement("optgroup");
var label = option1.innerHTML.replace(/^[^\-]-/, "");
optgroup.setAttribute("label", label);
destinationSelect.removeChild(option1);
destinationSelect.removeChild(option2);
optgroup.appendChild(option1);
optgroup.appendChild(option2);
optgroups.push(optgroup);
}
for(var i = 0; i < optgroups.length; i ++) {
destinationSelect.appendChild(optgroups[i]);
}