表单元素之下拉列表

<select>元素用来创建下拉列表。

<option>标签定义下拉列表中的一个选项（一个条目）

<optgroup>标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合, 你可以使<optgroup> 标签能够很简单的将相关选项组合在一起。

<form name="input" action="url" method="get">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</form>

效果展示

<form name="input" action="url" method="get">
  <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>
</form>

一级下拉列表效果展示

<form name="input" action="url" method="get">
  <select>
    <option value="volvo">山东</option>
    <option value="saab">湖北</option>
    <option value="mercedes" selected="selected">河南</option>
  </select>
</form>

二级下拉列表效果展示

<select name="" id="">
  <optgroup label="山东">
    <option value="" style="display: none">请选择</option>
    <option value="">青岛</option>
    <option value="" selected="selected">德州</op	tion>
    <option value="">潍坊</option>
  </optgroup>
  <optgroup label="河南">
    <option value="">郑州</option>
    <option value="">周口</option>
  </optgroup>
</select>

提示

selected="selected" 代表默认值

随堂训练

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。