根据选择中的选项创建 Optgroups [关闭]答案

【问题标题】：Create Optgroups based on options in a select [closed]根据选择中的选项创建 Optgroups [关闭]
【发布时间】：2017-07-26 16:50:46
【问题描述】：

以下是我的标记示例

<select id = "select_test">
<option>aus - testa1</option>
<option>aus - testa2</option>
<option>aus - testa3</option>
<option>bris - testb1</option>
<option>bris - testb2</option>
<option>bris - testb3</option>
<option>melb - testc1</option>
<option>melb - testc2</option>
<option>melb - testc3</option>
</select>

使用 jQuery，我正在尝试从 ' - ' 之前的所有内容动态创建 optgroup。

我希望它变成的示例

<select id = "select_test">
<optgroup label = "aus">
<option>testa1</option>
<option>testa2</option>
<option>testa3</option>
</optgroup>
<optgroup label = "brisb">
<option>testb1</option>
<option>testb2</option>
<option>testb3</option>
</optgroup>
<optgroup label = "melb">
<option>testc1</option>
<option>testc2</option>
<option>testc3</option>
</optgroup>
</select>

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery html select optgroup

【解决方案1】：

您需要遍历每个选项，拆分值以找到要创建的组名。像这样的：

var prevGroup, $group = $();
$('#select_test option').remove().each(function() {
    var $option = $(this),
        values = $option.text().split(' - '),
        group = values[0];

    if (group != prevGroup) {
        $group = $('<optgroup />', { label: group }).appendTo('#select_test');
    }

    $group.append($('<option />', {
        text: values[1],
        value: values[1]
    }));

    prevGroup = group;
});

Example fiddle

【讨论】：