添加 optgroup 以动态使用 javascript 进行选择答案

【问题标题】：Adding optgroups to select using javascript dynamically添加 optgroup 以动态使用 javascript 进行选择
【发布时间】：2011-01-13 07:36:51
【问题描述】：

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

不过，每组总是有两个目的地。

请建议如何实施提前致谢。

【问题讨论】：

标签： javascript jquery select options optgroup

【解决方案1】：

这不是太棘手，您只需要稍微调整一下您的选项。将它们从文档流中取出，添加一个 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]);
}

【讨论】：

谢谢！但它抛出异常错误：[Exception...“Node was not found”代码：“8”nsresult：“0x80530008（NS_ERROR_DOM_NOT_FOUND_ERR）我猜是因为removeChild应该删除DOM元素，而不是options[i]...跨度>
hmm.. 它只是排序现在的列表，而不是添加组 :( 啊，我的耻辱.. 然后我需要添加标签...谢谢 :)
Mootools FTW！ var optgroup = new Element('optgroup', {label: option2.get('text').substr(0, option2.get('text').toString().indexOf("-"))});

【解决方案2】：

您可以使用 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 中。它还根据选项中的文本确定将 optgroup 标记为什么。

【讨论】：