添加 optgroups 以使用 javascript 动态选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2203883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding optgroups to select using javascript dynamically
提问by moogeek
I have a dynamically populated (by ajax) select box with resulting options like that:
我有一个动态填充的（通过 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>
... 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):
我想要的是在加载列表后使用 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>
Though,there are always two destinations in each group.
虽然，每组总是有两个目的地。
Please, advice how to implement this Thanks in advance.
请建议如何实施这一点提前谢谢。
采纳答案by DaveS
You can do this in place using jQuery:
您可以使用 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);
}
});
});
This code iterates over all the options in the select tag, and wraps every set of two in an optgroup. It also figures out what to label the optgroup as, based on text in the options.
此代码遍历 select 标记中的所有选项，并将每组两个选项包装在一个 optgroup 中。它还根据选项中的文本确定将 optgroup 标记为什么。
回答by Andreas Jansson
This is not too tricky, you only need to move around your options a bit. Take them out of the document flow, add an optgroup in the place of the two associated options and append the options to that optgroup.
这并不太棘手，您只需要稍微移动一下您的选项即可。将它们从文档流中取出，在两个关联选项的位置添加一个 optgroup，并将选项附加到该 optgroup。
Assuming that the options are actually sequential, as in your example, a possible, good old DOM scripting implementation is as follows:
假设选项实际上是连续的，如您的示例中所示，一个可能的、良好的旧 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]);
}
