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

    在web表单中,HTML元素<option>用于定义在<select>, <optgroup>或<datalist>元素中包含的项。<option>可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。

    浏览器支持

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

    示例

    <select>
      <option value="volvo">volvo</option>
      <option value="saab">saab</option>
      <option value="opel" selected="selected">opel</option>
      <option value="audi">audi</option>
    </select>
    

    标签定义及使用说明

    • <option>标签定义下拉列表中的一个选项(一个条目)。<option>标签中的内容作为<select>或者<datalist>一个元素使用。
    • 如果列表选项很多,可以使用<optgroup>标签对相关选项进行组合。
    • <option><select>或者<datalist>标签结合使用。否则这个标签是没有意义的。
    • <option>标签可以在不带有任何属性的情况下使用,但是您通常需要使用value属性,此属性会指示出被送往服务器的内容。
    内容分类
    允许的内容带有最终转义字符(例如&eacute;)的文本
    标签省略开始标记是必需的。如果此元素紧接着是另一个<option>元素或<optgroup>,或者父元素没有其他内容,则结束标记是可选的。
    允许的父元素<select><optgroup><datalist>元素
    DOM接口HTMLOptionElement

    属性

    此元素包括全局属性。

    • disabled如果设置了这个布尔属性,选项就不是可选的。浏览器通常会将这种控件显示为灰色,并且不再接受任何浏览器事件,例如鼠标点击或者焦点相关的事件。如果这个属性没有设置,如果元素的祖先是禁用的<optgroup>元素,元素仍然是禁用的。
    • label这个属性是用于表示选项含义的文本。如果label属性没有定义,它的值就是元素文本内容。
      使用注解:label属性为包含短的标签而设计,通常用在层级菜单中。value属性描述了更长的标签,为用在单选按钮附近而设计。
    • selected如果存在,则这个布尔属性表明,这个选项初始被选中。如果<option>元素是<select>元素的后继,并且它的multiple属性没有设置,这个<select>元素只有一个<option>元素可以拥有selected属性。
    • value这个属性的内容代表这个选项选中的话,提交给表单的值。如果省略了这个属性,值就从选项元素的文本内容中获取。

    属性

    属性描述45
    disableddisabled规定此选项应在首次加载时被禁用。45
    labeltext定义当使用<optgroup>时所使用的标注。45
    selectedselected规定选项(在首次显示在列表中时)表现为选中状态。45
    valuetext定义送往服务器的选项值。45

    HTML 4.01 与 HTML 5 之间的差异

    在 HTML 5 中,<option>标签也用于新元素<datalist>中。

    全局属性

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

    事件属性

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

    实例

    创建带有 4 个选项的选择列表:

    <select>
    	<option value="volvo">volvo</option>
    	<option value="saab">saab</option>
    	<option value="opel">opel</option>
    	<option value="audi">audi</option>
    </select>
    

    上篇:<datalist>

    下篇:<fieldset>