html optgroup

// optgroup标签的定义和用法
<select>
  <optgroup label="Java">
    <option value="jsp Servlet">jsp Servlet</option>
    <option value="javaEE">javaEE</option>
  </optgroup>
  <optgroup label=".Net">
    <option value="aspx">aspx</option>
    <option value="C#">C#</option>
  </optgroup>
</select>

// optgroup标签属性
<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars" disabled="disabled">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

相关问题

<optgroup>标签

`<optgroup>` 标签在HTML中用于创建下拉列表（ `<select>` 元素）中的选项组，它允许组织相关的选项并提供更好的用户界面。`optgroup`标签包含一个或多个`<option>`元素，它们作为一个分组显示，通常会在选择框中显示为标题，例如“按类别”、“按地区”等。每个`optgroup`都有一个唯一的`label`属性，表示该组的标题，用户可以选择其中的任何一个`<option>`。

例子：

<select>
  <optgroup label="水果">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="carrot">胡萝卜</option>
    <option value="lettuce">生菜</option>
  </optgroup>
</select>

在这个例子中，“水果”和“蔬菜”就是两个不同的选项组。

如何动态渲染 optgroup

动态渲染 optgroup 可以使用 JavaScript 或者 jQuery。以下是一个使用 jQuery 动态渲染 optgroup 的示例代码：

<select id="mySelect"></select>

var options = [
  { value: '1', text: 'Option 1', group: 'Group 1' },
  { value: '2', text: 'Option 2', group: 'Group 1' },
  { value: '3', text: 'Option 3', group: 'Group 2' },
  { value: '4', text: 'Option 4', group: 'Group 2' },
];

// Create a dictionary to hold the groups
var groups = {};

// Loop through the options and group them by group name
for (var i = 0; i < options.length; i++) {
  var option = options[i];
  var groupName = option.group;
  if (!groups[groupName]) {
    groups[groupName] = [];
  }
  groups[groupName].push(option);
}

// Loop through the groups and add them to the select
for (var groupName in groups) {
  var groupOptions = groups[groupName];
  var $optgroup = $('<optgroup label="' + groupName + '"></optgroup>');
  for (var j = 0; j < groupOptions.length; j++) {
    var option = groupOptions[j];
    $optgroup.append('<option value="' + option.value + '">' + option.text + '</option>');
  }
  $('#mySelect').append($optgroup);
}

这段代码会将 options 数组中的选项动态渲染为带有 optgroup 分组的 select 元素。