Hello!
I have a dynamically populated (by ajax) select box with resulting options like that:
<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>
... there are actually more of them but not the essence
The thing i want is to group each this two option portions by optgroup using Javascript (using Jquery or Mootools maybe) after the list is loaded, so that before each of this group - we add an optgroup tag with label that we get from second option html of the group (actually the word before dash):
<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>
Though,there are always two destinations in each group.
Please, advice how to implement this Thanks in advance.