• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <optgroup>

    在一个web表单中,HTML元素<optgroup>会创建包含在一个<select>元素中的一组选项

    浏览器支持

    大多数主流浏览器支持<optgroup>标签。

    示例

    <select>
          <optgroup label="swedish cars">
    	      <option value ="volvo">volvo</option>
    	      <option value ="saab">saab</option>
          </optgroup>
          <optgroup label="german cars">
    	      <option value ="mercedes">mercedes</option>
    	      <option value ="audi">audi</option>
          </optgroup>
    </select>
    

    标签定义及使用说明

    • <optgroup>标签经常用于把相关的选项组合在一起。此元素允许您组合选项。
    • <optgroup>标签能够将很多相关选项组合在一起。
    • <optgroup>元素不能嵌套。
    Content categories
    Permitted content0或多个,用于定义在<option>,<optgroup><datalist>元素中包含的项。<option>可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。<option>元素
    Tag omissionThe start tag is mandatory. The end tag is optional if this element is immediately followed by another <optgroup> element, or if the parent element has no more content.
    允许的父元素元素是一种表单控件,可创建选项菜单。菜单内的选项为<option>, 可以由<optgroup>元素分组。选项可以被用户预先选择。<select>元素.
    DOM接口HTML 选项组元素

    属性

    属性描述45
    labeltext_label定义选项组的标注。45
    disableddisabled在其首次加载时,禁用该选项组。45
    • disabled如果设置了这个布尔值,那么这个选项组中将没有选项是可以被选择的。通常浏览器会置灰这样的控件,它不会再接受任何浏览器事件,例如鼠标点击或者焦点相关的事件。
    • label选项组的名字,当在用户界面标记(label)选项的时候可以被浏览器使用。使用这个元素时必须加上这个属性

    HTML 4.01 与 HTML5中的差异

    无。

    全局属性

    <optgroup>标签支持全局属性,查看完整属性表HTML全局属性。

    事件属性

    <optgroup>标签支持所有HTML事件属性。

    例子

    <select>
    	<optgroup label="Group 1">
    		<option>Option 1.1</option>
    	</optgroup> 
    	<optgroup label="Group 2">
    		<option>Option 2.1</option>
    		<option>Option 2.2</option>
    	</optgroup>
    	<optgroup label="Group 3" disabled>
    		<option>Option 3.1</option>
    		<option>Option 3.2</option>
    		<option>Option 3.3</option>
    	</optgroup>
    </select>
    

    上篇:<progress>

    下篇:<output>