[JavaScript知识库]web前端开发与应用——创建下拉列表

select控件

select控件可以创建选择框。可为用户提供一组选项，允许用户从中选取，通常呈现为下拉菜单的样式。

select控件的基本结构

下拉列表选择区是由<select>标签和<option>标签构成，其中<select>标签用来创建下拉列表，<option>标签定义了列表中的可用选项。基本结构如下：

1. <select name="">
2. <option value=" ">选项1</option>
3. <option value=" ">选项2</option>
4. ...
5. </select>

select标签的常用属性

select标签的常用属性有：

• name：规定下拉列表的名称
• size：规定列表中可见选项的数目
• multiple：设定为多选
• disabled：禁用该下拉列表

select标签的新属性

HTML5中引入的select新属性有：

• autofocus：规定在页面加载时下拉列表自动获得焦点
• required：规定用户在提交表单前必须选择一个下拉列表中的选项
• form：定义 select 字段所属的一个或多个表单

option标签的常用属性

• disabled：规定该选项在首次加载时被禁用
• selected：规定该选项在首次加载时为选中状态
• value：定义送往服务器的选项值

• 创建多选选择框

  select元素的multiple属性用于定义选择框是否多选 提示： 对于 windows：按住 Ctrl 按钮来选择多个选项 对于 Mac：按住 command 按钮来选择多个选项

  创建具有默认选项的选择框

  option元素的select属性可以设置默认选项(selected="selected")