下拉列表 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 ...
随机推荐
- GL_ARRAY_BUFFER 和 GL_ELEMENT_ARRAY_BUFFER
转载请注明出处.系列教程: webgl-lesson.wysaid.org 第七话, 了解OpenGL的几种Array Buffer,实现大量顶点的批量绘制, 以及映射纹理坐标 每一话都间隔很久,其实 ...
- B树、B-树、B+树、B*树
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right) 2.所有结点存储一个关键字 3.非叶子节点的左指针指向小于其关键字的字数,右指针指向大于其关键字的字数: 如: B树的 ...
- 微信小程序购物商城系统开发系列-目录结构
上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的 ...
- Office2013插件开发Outlook篇(1)-- 第一个office2013插件
一.环境: 下载VS2013安装,记得安装office插件开发包哦. 二.新建Outlook插件项目
- 【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
- javascript 中断函数的使用 setInterval()——返回顶部
方法名称:gotop() 功能描述:点击某个元素,调用方法gotop(),固定间隔,滚动至屏幕顶部 日期 :2016.06.06 16:02 author :cyh2009@live.com < ...
- 【JavaScript】javascript 方法 test()
个人理解:var b = x.test(y); y是否存在模式x中,返回true或false:x可以是正则,字符串,
- $.extend()的用法【转】
1.合并多个对象. 这里使用的就是$.extend()的嵌套多个对象的功能. 所谓嵌套多个对象,有点类似于数组的合并的操作. 但是这里是对象.举例说明. 代码如下: <span style=&q ...
- JS点击更换网页背景颜色
JS部分 <script type="text/javascript"> // 定义可换的颜色 var colors = ["#ff0000", & ...
- HttpClient 4.3 使用
httpclient的api变化很快,本篇随笔记录自己使用4.3.6版本时所做的设置.版本虽然不是最新,但达到了目的就行. maven依赖: <dependency> <groupI ...