首页 > 代码库 > HTML <select> 标签 创建单选或多选菜单
HTML <select> 标签 创建单选或多选菜单
所有主流浏览器都支持 <select> 标签。
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
提示:select 元素是一种表单控件,可用于在表单中接受用户输入。
属性
New: HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
autofocus(5) | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
disabled | disabled | 规定禁用该下拉列表。 |
form(5) | form_id | 规定文本区域所属的一个或多个表单。 |
multiple | multiple | 规定可选择多个选项。 |
name | name | 规定下拉列表的名称。 |
required(5) | required | 规定文本区域是必填的。 |
size | number | 规定下拉列表中可见选项的数目。 |
本例演示如何在HTML页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
<html><body><form><select name="cars"><option value=http://www.mamicode.com/"volvo">Volvo</option><option value=http://www.mamicode.com/"saab">Saab</option><option value=http://www.mamicode.com/"fiat">Fiat</option><option value=http://www.mamicode.com/"audi">Audi</option></select></form></body></html>
- 本例演示如何创建一个简单的带有预选值的下拉列表。(译者注:预选值指预先指定的首选项。)
<html><body><form><select name="cars"><option value=http://www.mamicode.com/"volvo">Volvo</option><option value=http://www.mamicode.com/"saab">Saab</option><option value=http://www.mamicode.com/"fiat" selected="selected">Fiat</option><option value=http://www.mamicode.com/"audi">Audi</option></select></form></body></html>
附:Select 对象
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中,<select> 标签每出现一次,一个 Select 对象就会被创建。
您可通过遍历表单的 elements[] 数组来访问某个 Select 对象,或者使用 document.getElementById()。
Select 对象集合
集合 | 描述 |
---|---|
options[] | 返回包含下拉列表中的所有选项的一个数组。 |
Select 对象属性
属性 | 描述 |
---|---|
disabled | 设置或返回是否应禁用下拉列表。 |
form | 返回对包含下拉列表的表单的引用。 |
id | 设置或返回下拉列表的 id。 |
length | 返回下拉列表中的选项数目。 |
multiple | 设置或返回是否选择多个项目。 |
name | 设置或返回下拉列表的名称。 |
selectedIndex | 设置或返回下拉列表中被选项目的索引号。 |
size | 设置或返回下拉列表中的可见行数。 |
tabIndex | 设置或返回下拉列表的 tab 键控制次序。 |
type | 返回下拉列表的表单类型。 |
标准属性
属性 | 描述 |
---|---|
className | 设置或返回元素的 class 属性。 |
dir | 设置或返回文本的方向。 |
lang | 设置或返回元素的语言代码。 |
title | 设置或返回元素的 title 属性。 |
Select 对象方法
方法 | 描述 |
---|---|
add() | 向下拉列表添加一个选项。 |
blur() | 从下拉列表移开焦点。 |
focus() | 在下拉列表上设置焦点。 |
remove() | 从下拉列表中删除一个选项。 |
Select 对象事件句柄
事件句柄 | 描述 |
---|---|
onchange | 当改变选择时调用的事件句柄。 |
HTML <select> 标签 创建单选或多选菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。