跳到主要内容

下拉与自动完成控件

select 与 option 如何构成下拉列表？​

  • select: 下拉列表控件;
  • option: 一个可选项, 标签内容为显示文本, value 为提交值;
  • 提示项: 常用 value="" 的 option 作为未选择时的占位;
<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>

optgroup 如何给选项分组？​

  • 写法: 用 optgroup 包住同类型的 option;
  • label: 分组名称, 本身不可选;
  • 默认选中: option 上的 selected 表示初始选中项;
<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
  </optgroup>
</select>

datalist 如何为输入框提供候选？​

  • 组合: input 用 list 属性, 值等于 datalist 的 id;
  • 候选: datalist 内用 option 声明预定内容;
  • 行为: 输入时自动提示候选项, 并可像普通输入框一样自由输入;
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

select 与 datalist 有什么区别？​

控件可选范围提交的值
select只能在选项中选选中项的值
datalist建议列表, 可自由输入输入框的值