所有主流浏览器都支持 <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> 标签 创建单选或多选菜单的更多相关文章

  1. HTML&CSS基础学习笔记1.24-input标签的单选与多选

    单选和多选 单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...

  2. select标签

    select标签 select 可以创建单选或多选菜单. <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. HTML中select标签单选多选详解

    select 元素可创建单选或多选菜单.当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包 ...

  4. HTML <select> 标签

    定义和用法 select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中的可用选项. HTML 4.01 与 HTML ...

  5. php一些单选、复选框的默认选择方法(示例)

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  6. Shell:如何写一个多选菜单的脚本

    Blog:博客园 个人 翻译自How to Create a Multiple Choice Menu in Bash Scripts 目录 多选菜单脚本介绍 配置输入提示 创建预定选项列表 创建预选 ...

  7. 多选菜单shell脚本

    有 很多方法 可以读取Bash脚本中的用户输入. 但是,允许用户键入输入会带来一些问题. 主要问题是输入验证,您必须在其中考虑所有可能的输入. 解决此问题的一种简单方法是为Bash脚本创建一个多选菜单 ...

  8. Django之model.form创建select标签

    前言 之前我们学习了form表单验证用户输入格式和自动创建HTML,那么如果用户创建select标签时怎么办呢,先来看下这个东西: models.py 数据格式: class UserInfo(mod ...

  9. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

随机推荐

  1. 在Abp中执行sql语句

    目录 前言 最近使用ABP(ASP.NET Boilerplate)做项目,有些查询(或存储过程)直接使用sql语句会更方便一点. 定义一个接口 在Core项目中定义一个接口,如:ISqlExecut ...

  2. HTML5移动Web开发(十)——在浏览器中启动手机原生应用

    用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...

  3. [New Portal]Windows Azure Virtual Machine (14) 在本地制作数据文件VHD并上传至Azure(1)

    <Windows Azure Platform 系列文章目录> 之前的内容里,我介绍了如何将本地的Server 2012中文版 VHD上传至Windows Azure,并创建基于该Serv ...

  4. 七、L2CAP

    1.      L2CAP 在BR/EDR模式下,在connection procedure成功执行后,两台设备通过一条物理信道(physical channel)连接在一起,同时两者之间建立起了一条 ...

  5. ASP.NET MVC系列:为已有模型添加新的属性

    在模型类Movie中添加一个新的属性Rating

  6. 基于ListBox的相关操作

    Winform中两个listbox的操作是平时比较常用的操作. 本次将以一个Winform实例来分享一下两个listbox的操作,包括:listbox添加项,项的上移下移等操作. 假设有两个listb ...

  7. 介绍开源的.net通信框架NetworkComms框架 源码分析(十)DOSProtection

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  8. mvc 修改 删除 linq

    Models文件夹里面可以Linq,Entity两种映射框架,也允许有ADO的操作,甚至可以ADO代码和映射代码一起操作 控制器当中允许有相同的方法名,类似在做修改时有两个Modify方法,但是MVC ...

  9. Tigase XMPP Server的安装

    Tigase和OpenFire都是基于XMPP(Extensible Messaging and Presence Protocol, 可扩展通讯和表示协议)的,主要功能是实现消息的即时通信.Goog ...

  10. 【JSP手记】--jsp里面session.getAttribute("×××")在java中的表示

    JSP里面的    <%=session.getAttribute("×××")%> 与java等价于         request.getSession().get ...