У меня есть динамически заполненный (с помощью AJAX) поле выбора с результирующими параметрами, такими как это:

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

... их на самом деле больше, но не суть

Я хочу сгруппировать каждую из этих двух частей опций по optgroup, используя Javascript (возможно, используя Jquery или Mootools) после загрузки списка, так что перед каждой из этой группы - мы добавляем тег optgroup с меткой, которую мы получаем из второй опции html группы (на самом деле слово перед тире):

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

Хотя в каждой группе всегда есть два пункта назначения.

Пожалуйста, посоветуйте, как это реализовать Спасибо заранее.