下拉列表 select-option ; select-optgroup-option
HTML中的下拉列表:
- <select>
- <option value ="1">Volvo</option>
- <option value ="2">Saab</option>
- <option value="3">Opel</option>
- <option value="4">Audi</option>
- </select>
其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文本内容(text content)是下拉列表项目中显示到页面上的值,value是真正需要提交到服务端的值。
显示效果如下所示:
更复杂的下拉列表:
- <select>
- <optgroup label="Swedish Cars">
- <option value="1">Volvo</option>
- <option value="2">Saab</option>
- </optgroup>
- <optgroup label="German Cars">
- <option value="3">Mercedes</option>
- <option value="4">Audi</option>
- </optgroup>
- </select>
这个下拉列表包含一个“项目组”(item group),这个组是无法选择的,使用label标签标记字面内容,真正起作用的,还是value属性。
看一下这个包含“项目组”的下拉列表
option中的参数:selected="selected"
如果需要打开页面就默认选中某个option,需要用到selected参数:
- <select>
- <option value="1">Volvo</option>
- <option value="2">Saab</option>
- <option value="3" selected="selected">Mercedes</option>
- <option value="4">Audi</option>
- </select>
option中的参数:disabled="disabled"
如果需要禁用某个项目,但是却又不想隐藏,可以使用disabled属性
- <select>
- <option value="1">Volvo</option>
- <option value="2">Saab</option>
- <option value="3" disabled="disabled">Mercedes</option>
- <option value="4">Audi</option>
- </select>
option中的参数:title
如果需要在鼠标放到某个项目上时,给出提示,可以使用title属性
- <select>
- <option value="1">Volvo</option>
- <option value="2">Saab</option>
- <option value="3">Mercedes</option>
- <option value="4" title="Audi, your best choice!">Audi</option>
- </select>
其实,title也可以用在很多其他的HTML标签中!
下拉列表 select-option ; select-optgroup-option的更多相关文章
- HTML 表单和输入<textarea><label><fieldset><legend><select><optgroup><option><button>
textarea><label><fieldset><legend><select><optgroup><option>& ...
- Html select、option、optgroup 标签
Html select 标签 </body> </html> <!-- select外部下拉选择框.name="xxx"标识后端获取名称 --> ...
- select 下拉菜单Option对象使用add(elements,index)方法动态添加
原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- js获取select默认选中的Option (非当前选中值)
js函数方法: <script> function getDefaultSelectedOption(selectId, valIfNull) { var selectId = selec ...
- 地址选择的,弹出的下拉。select。通过《option》《/option》来隔开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- select获取选中的option(包含value和text,重点是text怎么获取)
简单描述:后台需要获取到select标签选择的内容,也就是text,该怎么取呢?很简单. 代码: //hml代码<div class="col-md-6"> <l ...
- 获取select被选中的option的值
<select id="select"> <option>绥江</option> <option>西江</ ...
- 项目总结09:select标签下封装option标签
项目中经常用到Select标签,用封装好的方法获取option,可以避免冗赘的代码: 1.JSP--标签 <select class="width_md" name=&quo ...
- HTML标签 select 里 动态添加option
HTML标签 select 里 动态添加option: ☆ var today = new Date(); var yearNow = today.getFullYear(); var optiong ...
随机推荐
- flask+sqlite3+echarts3+ajax 异步更新数据
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- Netron源码解读(一):GraphControl画布对象
GraphControl是Netron中比较重要的一个类,属于所有图形作图的画布.它管理着画布上的所有图形对象的移动.变形.连接.拖放.这些功能很重要的一部分是通过对鼠标事件的处理实现的.下面我们就看 ...
- c#串口通信类代码可以直接调用
文章首发于浩瀚先森博客 直接上代码 public struct SerialPara { private string portName; public string PortNameSetGet { ...
- Android开发之XUtils框架使用和报错处理
一.XUtils lib的的添加: 1.点击+,选择第一个Library dependency 2.输入XUtils 按enter键,搜索: 3.然后就是选择XUtils,选择哪个版本就看个人了,接 ...
- 86 ipmitools-查看硬件信息工具
1.简介 IPMI(Intelligent Platform Management Interface)即智能平台管理接口是使硬件管理具备"智能化"的新一代通用接口标准.用户可以利 ...
- url 中 # ? & 的作用
1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变 ...
- HTML5属性--(capture="camera") 上传照片或者打开手机相机
要获取手机相机拍照或者访问相册 这里贴一个相关链接:http://blog.csdn.net/jackfrued/article/details/8967667 JSP页面代码: <inp ...
- 鼠标的change事件
原本想着在<input>输入输入框中添加change事件,来实现对输入内容的限定. 当人们在使用时跟多的会直接去点击完成.所以完成按钮的点击事件会和change事件产生 冲突,所以我把验证 ...
- 运维自动化轻量级工具pssh
1pssh介绍 pssh是python写的可以并发在多台机器上批量执行命令的工具,它的用法可以媲美ansible的一些简单用法,执行起来速度比ansible快它支持文件并行复制,远程命令执行,杀掉远程 ...
- 解析 XML
解析 XML 文档: 下面的代码片段把 XML 文档解析到 XML DOM 对象中: if (window.XMLHttpRequest){// code for IE7+, Firefox, Chr ...