Eu tenho uma caixa de seleção preenchida dinamicamente (por ajax) com opções resultantes dessa forma:

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

... na verdade, existem mais deles, mas não a essência

O que eu quero é agrupar cada uma dessas duas partes da opção por optgroup usando Javascript (usando Jquery ou Mootools talvez) depois que a lista for carregada, para que antes de cada um desse grupo - adicionemos uma tag optgroup com o rótulo que obtemos da segunda opção html do grupo (na verdade, a palavra antes do traço):

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

No entanto, sempre existem dois destinos em cada grupo.

Por favor, aconselhe como implementar isso Agradecemos antecipadamente.