可以使用<optgroup>
元素和<option>
元素来创建分组选项的多选框。<optgroup>
元素用于将选项分组,而<option>
元素则用于定义每个选项。以下是一个示例:
<label for="fruits">选择您喜欢的水果:</label>
<select multiple id="fruits">
<optgroup label="热带水果">
<option value="banana">香蕉</option>
<option value="pineapple">菠萝</option>
<option value="mango">芒果</option>
</optgroup>
<optgroup label="浆果">
<option value="strawberry">草莓</option>
<option value="raspberry">覆盆子</option>
<option value="blueberry">蓝莓</option>
</optgroup>
<optgroup label="柑橘类">
<option value="orange">橙子</option>
<option value="grapefruit">葡萄柚</option>
<option value="lemon">柠檬</option>
</optgroup>
</select>
上面的示例中,我们有三个<optgroup>
元素,每个元素都有一个label
属性来定义组的名称。每个<optgroup>
元素中都有多个<option>
元素,每个元素都有一个value
属性来定义选项的值,以及显示在选项中的文本。
我们还在<select>
元素中添加了一个multiple
属性,以允许用户选择多个选项。
通过使用<optgroup>
元素和<option>
元素,我们可以创建一个具有组织结构的多选框,使用户更容易地找到他们想要选择的选项。