添加optgroups选择使用JavaScript动态

Question

我有这样导致选项动态填充（阿贾克斯）选择框：

<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标签，我们从g的第二选项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中。它还根据选项中的文字找出将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]); 
}