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标签中!
- 大小: 1.9 KB
- 大小: 2.8 KB
- 大小: 3.7 KB
分享到:
相关推荐
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用!!!
模仿地区选择下拉列表,做的,学院专业班级,下拉列表
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
select下拉菜单显示文字属于很正常的事情,但是显示图片,这样的代码就少见了吧,今天懒人之家给大家推荐的就是显示图片的select特效
下拉列表 select 挺好看的 !!!
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 <!DOCTYPE html> <html lang="zh-CN"> <title>Insert title here</title> <script src="jquery.min.js"></script> ...
此框下拉列表框可输入,可根据输入内容自动过滤模糊查询到的option值,点击弹框下拉列表框,选择完毕后下拉列表框自动隐藏,非常好用
Dom查找_表单验证01_ 点击链接_添加一个div _表单验证02 _创建节点_ Html dom中的select, option_ 级联下拉列表;
HTML二级联动下拉列表框的实现,如选择 省,市.zip
jQuery Stylish Select 是一款jQuery Select下拉列表外观自定义插件,把Select下拉框美化成圆角的样式,另外颜色也不一样了,下拉列表中每个item的背景色也添加了.本Select美化用到了jquery了,在最新的jquery版本下未...
全国城市三级联动下拉列表,含修改页面select信息自动加载部分...个人博客:http://blog.csdn.net/qq_35624642?viewmode=contents
jQuery.jSelectDate 0.1 - 下拉列表日期控件 http://www.wathon.com http://www.cnblogs.com/huacn/archive/2008/01/16/jquery_plugin_jSelectDate.html 更新记录: Version 0.2 - 2008-1-24 1.加入了闰年、大小月...
网络下载的资源,进行改造。实现下拉列表 可输入可选择,模拟html select 标签
很漂亮,比较适合女性一类比较温馨的网站 漂亮的下拉框 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
html中默认的select太丑了,使用jquery+html自定义下拉框。样式随心所欲。
这是为了解决Select高度的问题的js等文件
自己做了三个专门用来操作下拉列表框(select)的jquery插件,一是通过ajax方式填充列表项的FillOptions, 二是下拉列表框的联动插件CascadingSelect,三是手动添加列表项的AddOption插件 具体说明请看这里 ...
模拟select下拉列表特效,因为html的下拉列表的样式修改美化等有些复杂,不容易控制。注意用于对页面的颜色搭配过于讲究的。
下拉列表联动 省市 日期 应有尽有,为了大家方便 拿出来分享 /* PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.02 完整版 *\ 制作时间:2005-12-30 更新时间:2006-01-24 数据修正...