所有主流浏览器都支持 <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页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
  1. <html>
  2.  
  3. <body>
  4.  
  5. <form>
  6. <select name="cars">
  7. <option value="volvo">Volvo</option>
  8. <option value="saab">Saab</option>
  9. <option value="fiat">Fiat</option>
  10. <option value="audi">Audi</option>
  11. </select>
  12. </form>
  13.  
  14. </body>
  15. </html>
本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
  1. <html>
  2.  
  3. <body>
  4.  
  5. <form>
  6. <select name="cars">
  7. <option value="volvo">Volvo</option>
  8. <option value="saab">Saab</option>
  9. <option value="fiat" selected="selected">Fiat</option>
  10. <option value="audi">Audi</option>
  11. </select>
  12. </form>
  13.  
  14. </body>
  15. </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. 借助 CSS Colorguard 来避免使用重复的颜色

    每一个 CSS 项目开始时愿望都是很美好的,但不可避免地,多人协作的项目相互之间可能重复使用了相似的颜色,而你从来不知道它们的存在.CSS Colorguard 帮助您保持您想要的颜色设置,当你添加的 ...

  2. 在SQL Server里禁用聚集索引——真的好么？

    有人问了我一个最有意思的问题:“你能禁用聚集索引么?” 对这个问题,我先是吓了一跳,因为我从未想过禁用聚集索引,因为聚集索引代表表数据,对这个最有趣问题,我立即答道:“我认为可以,但是...” 好吧, ...

  3. 大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

    一.拉近我们的距离 我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图:                      ...

  4. 解决The file “FWLifeApp” couldn’t be opened because you don’t have permission to view it.问题

    The file “FWLifeApp” couldn’t be opened because you don’t have permission to view it问题是因为项目文件中的Bundl ...

  5. mysql 二进制日志后缀数字最大为多少

    之前看到mysql二进制日志后面会加一个以数字递增为结尾的后缀,一直在想当尾数到达999999后会发生什么情况,先查了一下官网,对后缀有这样一句介绍:The server creates binary ...

  6. Android SDK Android NDK Android Studio 官方下载地址

    2016.12 Android Studio Windows Includes Android SDK https://dl.google.com/dl/android/studio/install/ ...

  7. Oracle导入导出命令

    //导出 exp techrpt_data/techrpt_data@orcl file=d:\_临时文件\techrpt_data.dmp owner=techrpt_data //导入 imp t ...

  8. Win10通用程序 UWP版HtmlAgilityPack UWP应用使用示例

    Win10 UWP版HtmlAgilityPack,UWP应用使用示例下载. Win10 发布了一个多星期,sdk是随着一起发布的,我安装好vs2015和sdk 开发UWP 通用程序. 在做网络解析的 ...

  9. [水煮 ASP.NET Web API2 方法论]（3-6）万能路由

    问题 定义什么样的路由,可以不会受请求参数类型和数量的限制,而被全部捕获? 解决方案 在路由模板中,给参数添加一个"*"前缀,例如 {*param},只要请求的 URL 能够和路由 ...

  10. 最小生成树---Kruskal/Prime算法

    1.Kruskal算法 图的存贮采用边集数组或邻接矩阵,权值相等的边在数组中排列次序可任意,边较多的不很实用,浪费时间,适合稀疏图.      方法:将图中边按其权值由小到大的次序顺序选取,若选边后不 ...