我有一个动态填充的(通过 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>
...实际上还有更多,但不是本质
我想要的是在加载列表后使用 Javascript(可能使用 Jquery 或 Mootools)通过 optgroup 对这两个选项部分进行分组,以便在每个组之前 - 我们添加一个带有标签的 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>
但是,每组中总是有两个目的地。
请提前告知如何实施此感谢。