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="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
 
</body>
</html>

本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）

<html>
 
<body>
 
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="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> 标签创建单选或多选菜单的更多相关文章

HTML&CSS基础学习笔记1.24-input标签的单选与多选
单选和多选单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...
select标签
select标签 select 可以创建单选或多选菜单. <!DOCTYPE html> <html> <head> <meta charset=" ...
HTML中select标签单选多选详解
select 元素可创建单选或多选菜单.当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包 ...
HTML <select> 标签
定义和用法 select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中的可用选项. HTML 4.01 与 HTML ...
php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
Shell：如何写一个多选菜单的脚本
Blog:博客园个人翻译自How to Create a Multiple Choice Menu in Bash Scripts 目录多选菜单脚本介绍配置输入提示创建预定选项列表创建预选 ...
多选菜单shell脚本
有很多方法可以读取Bash脚本中的用户输入. 但是,允许用户键入输入会带来一些问题. 主要问题是输入验证,您必须在其中考虑所有可能的输入. 解决此问题的一种简单方法是为Bash脚本创建一个多选菜单 ...
Django之model.form创建select标签
前言之前我们学习了form表单验证用户输入格式和自动创建HTML,那么如果用户创建select标签时怎么办呢,先来看下这个东西: models.py 数据格式: class UserInfo(mod ...
使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

随机推荐

MYSQL的深入学习--优化步骤
MySql优化的一般步骤 1.通过show status 命令了解各种sql的执行效率 SHOW STATUS提供msyql服务器的状态信息一般情况下,我们只需要了解以”Com”开头的指令 show ...
Docker - Docker基础命令及使用
Docker Docker - 官网 Docker - Hub GitHub - Docker Docker中文社区 Docker基础命令 Docker 查看帮助信息:docker --help 查看 ...
Java Class文件详解
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) Java Class文件中包含以下信息: [+]view code ClassFile { u4 magic; ...
Azure ARM (1) UI初探
<Windows Azure Platform 系列文章目录> 在笔者之前的文章中,我们使用国内由世纪互联运维的Azure China,管理界面地址是:https://manage.win ...
HT for Web 3D游戏设计设计--汉诺塔（Towers of Hanoi）
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Towe ...
使用Python将HTML转成PDF
主要使用的是wkhtmltopdf的Python封装--pdfkit 安装 1. Install python-pdfkit: $ pip install pdfkit 2. Install wkht ...
js正则中的贪婪和非贪婪模式问题总结
var b="abeeee:eeeee:eeeeeab"; console.log(b.match(/e+\:e+/g));//["eeee:eeeee"]贪婪 ...
打开IE错误解决方法
1. 502.1 Internal Server Error Handle svc-Integraged has a bad module ManagedPipelineHandle解决方法:此种情况 ...
Bootstrap学习笔记系列3-------Bootstrap简单表单显示
表单布局垂直或基本表单基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...
c++控制台程序实现定时器
#include "stdafx.h" #include <iostream> #include <Windows.h> using namespace s ...

HTML <select> 标签 创建单选或多选菜单

属性