optgroups Hinzufügen von Javascript wählen mit dynamisch

Question

Ich habe ein dynamisch bevölkert (von Ajax) Auswahlbox mit daraus resultierenden Optionen wie folgt aus:

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

... es gibt tatsächlich mehr von ihnen aber nicht die Essence

Die Sache, die ich möchte ist, diese zwei Optionsteile durch optgroup mit Javascript (mit Jquery oder Mootools vielleicht) zu gruppieren, nachdem die Liste geladen ist, so dass vor jeder dieser Gruppe - wir fügen ein optgroup-Tag mit Label, dass Wir bekommen von der zweiten Option html des g roup (eigentlich das Wort vor dem Bindestrich):

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

Obwohl es in jeder Gruppe immer zwei Ziele gibt.

Bitte, Ratschläge, wie Sie dies implementieren Vielen Dank im Voraus.

Answer 1

Sie können dies mit jQuery anstelle tun:

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

    }); 
}); 

Dieser Code iteriert alle Optionen im select-Tag und umschließt jeden Satz von zwei in einer optgroup. Auf der Basis von Text in den Optionen wird auch herausgefunden, was die optgroup als zu bezeichnen ist.

Answer 2

Dies ist nicht zu schwierig, Sie müssen nur ein wenig um Ihre Optionen bewegen. Entfernen Sie sie aus dem Dokumentfluss, fügen Sie an Stelle der beiden verknüpften Optionen eine optgroup hinzu, und hängen Sie die Optionen an diese optgroup an.

Unter der Annahme, dass die Optionen tatsächlich sequentiell sind, wie in Ihrem Beispiel eine möglichst gute alte DOM-Scripting-Implementierung ist wie folgt:

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]); 
}