根据选择中的选项创建选择组
Create Optgroups based on options in a select
下面是我的标记示例
<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,我正在尝试从" - "之前的所有内容动态创建选择组。
我希望它成为什么样子的例子
<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>
任何帮助将不胜感激!!
您需要遍历每个选项,拆分值以查找要创建的组名。像这样:
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;
});
示例小提琴
相关文章:
- 在动态创建的元素上获取对特定选择器的引用
- JQuery对动态创建的对象进行选择
- Jquerymobile-使用javascript创建选择菜单
- 动态添加通过json创建的选择项
- 从动态创建的html选择中选择所选选项
- 如何动态创建许多Jquery颜色选择器(eyecon)
- 创建时选择Nav大写字母
- jQuery选择器不识别任何动态创建的HTML输入函数
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 如何根据电子邮件模板名称的选择创建依赖的同义词文本区域
- jQuery根据下拉菜单中的选择创建和删除字段
- 基于复选框选择创建元素
- 选中下拉列表并基于该选择创建 if 语句
- 基于选择创建动态选择表单
- 选择创建DOM元素还是在javascript中使用HTML生成控件
- 引导选择:无法使用引导选择创建一个简单的选择框
- jQuery选项卡-选择创建内容面板的位置
- 仍然无法从javascript中选择创建的元素
- KnockoutJs:基于下拉选择创建复选框列表
- 在AJAX/Javascript/HTML中基于下拉选择创建表单的问题