使用javascript动态添加要选择的optgroup

Question

我有一个动态填充的(通过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>

尽管如此，每个组中始终有两个目的地。

请建议如何实现这一点，谢谢提前。

Answer 1

您可以使用jQuery就地执行此操作：

$(document).ready(function() {
    var select = $('#destination');
    var opt1, opt2;
    $('option', select).each(function(i) {
        if (i % 2 === 0) {
            opt1 = $(this);
        } else {
            opt2 = $(this);
            var label = opt1.text().replace('London-', '');
            var optgroup = $('<optgroup/>');
            optgroup.attr('label', label);
            opt2.add(opt1).wrapAll(optgroup);
        }

    });
});

这段代码遍历select标记中的所有选项，并将每组两个选项包装在一个optgroup中。它还根据选项中的文本确定要将选项组标记为什么。

Answer 2

这并不是很棘手，你只需要移动一下你的选项即可。将它们从文档流中删除，在两个相关选项的位置添加一个optgroup，并将这些选项附加到该optgroup。

假设选项实际上是连续的，就像您的示例中一样，一个可能的、很好的旧DOM脚本实现如下所示：

var destinationSelect = document.getElementById("destination");
var options = destinationSelect.getElementsByTagName("option");

var optgroups = [];

while(options.length > 0) {

  var option1 = options[0];
  var option2 = options[1];
  var optgroup = document.createElement("optgroup");
  var label = option1.innerHTML.replace(/^[^\-]-/, "");
  optgroup.setAttribute("label", label);
  destinationSelect.removeChild(option1);
  destinationSelect.removeChild(option2);
  optgroup.appendChild(option1);
  optgroup.appendChild(option2);

  optgroups.push(optgroup);
}

for(var i = 0; i < optgroups.length; i ++) {
  destinationSelect.appendChild(optgroups[i]);
}