Ich habe ein dynamisch gefülltes (von Ajax) Auswahlfeld mit folgenden Optionen:

<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 davon, aber nicht das Wesentliche

Das, was ich möchte, ist, diese beiden Optionsteile nach optgroup unter Verwendung von Javascript (unter Verwendung von Jquery oder Mootools vielleicht) zu gruppieren, nachdem die Liste geladen wurde, so dass wir vor jeder dieser Gruppen ein optgroup-Tag mit Label hinzufügen, das wir von der zweiten Option erhalten HTML der Gruppe (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>

Es gibt jedoch immer zwei Ziele in jeder Gruppe.

Bitte, Ratschläge, wie man das umsetzt Vielen Dank im Voraus.