Hinzufügen optgroups wählen Sie mithilfe von javascript dynamisch

Ich habe eine dynamisch aufgefüllt (durch ajax) select-box mit den daraus resultierenden Optionen wie:

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

Dem, was ich will, ist die Gruppe jede dieser beiden option Teile von optgroup mit Javascript (mit Jquery oder Mootools vielleicht) nach der Liste wird geladen, so dass vor jeder dieser Gruppe - wir fügen ein optgroup-tag mit Etikett, bekommen wir aus der zweiten option html-Code der Gruppe (eigentlich ist 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 gibt immer zwei Ziele in jeder Gruppe.

Bitte, die Beratung, wie man dies umsetzen
Vielen Dank im Voraus.

InformationsquelleAutor moogeek | 2010-02-04
  1. 8

    Dazu können Sie mit 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);
        }

    });
});

    Dieser code iteriert über alle Optionen in der select-tag, und wickelt jeden Satz von zwei in einer optgroup. Es werden auch Figuren aus, was das label optgroup, basierend auf text in den Optionen.

    • Wow vielen Dank! Nice one! es funktionierte, wie ich wollte!
    InformationsquelleAutor DaveS
  2. 5

    Dies ist nicht allzu schwierig, Sie müssen nur bewegen Sie Ihre Optionen ein wenig. Nehmen Sie aus dem Belegfluss, fügen Sie ein optgroup an die Stelle der zwei zugehörigen Optionen, und fügen Sie die Optionen, die optgroup.

    Unter der Annahme, dass die Optionen tatsächlich sequentiell, wie in deinem Beispiel, eine mögliche, gute, alte DOM-scripting-die Umsetzung 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]);
}
    • Danke! Aber es gibt eine Ausnahme-Fehler: [Exception... "- Knoten wurde nicht gefunden" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR) ich denke, da removeChild entfernen sollten DOM-Element, nicht die Optionen[i]...
    • hmm.. irgendwie ist die Liste jetzt nicht das hinzufügen von Gruppen 🙁 Aah, meine Schande.. dann muss ich Beschriftungen hinzufügen,... - Danke 🙂
    • Mootools FTW!!! var optgroup = new Element('optgroup', {label: option2.get('text').substr(0, option2.get('text').toString().indexOf("-"))});
    InformationsquelleAutor Andreas Jansson
Schreibe einen Kommentar