下拉列表 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 ...
随机推荐
- CSS代码实例:用CSS代码写出的各种形状图形
一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square { width: 100px; height: 100px; backgrou ...
- 在JS方法中返回多个值的三种方法
在使用JS编程中,有时需要在一个方法返回两个个或两个以上的数据,用下面的几种方法都可以实现: 1 使用数组的方式,如下: <html> <head> <title> ...
- 为什么目前没有"成熟"的cookie插件?
一.序言 最近真是挺忙的啊,导致也挺久没有时间来看看园中各位大神的文章,只能感慨业务真尼玛的多,所以在此写下一篇文章来大话最近工作和学习上面的一点点收获体会,希望大家能够有所收获,这篇文章虽然说是一篇 ...
- TaskScheduler一个.NET版任务调度器
TaskScheduler是一个.net版的任务调度器.概念少,简单易用. 支持SimpleTrigger触发器,指定固定时间间隔和执行次数: 支持CronTrigger触发器,用强大的Cron表达式 ...
- Eclipse+Maven创建webapp项目<一>(转)
还在为jar下载而烦恼吗?还在为jar依赖关系而烦恼吗?还在为jar冲突而烦恼吗?强大的maven项目管理工具来拯救你们呢?自动下载jar,自动下载jar依赖包.你什么都不用做,只需要在中央仓库中co ...
- 【BZOJ 1065】【Vijos 1826】【NOI 2008】奥运物流
http://www.lydsy.com/JudgeOnline/problem.php?id=1065 https://vijos.org/p/1826 好难的题啊TWT ∈我这辈子也想不出来系列~ ...
- 利用python合并两个文件
1格式如下 在做利用zabbix的api来批量添加主机的时候,需要处理ip和hostname,在借用别人写的py程序的基础上,自己有改装了以下脚本,为自己使用.需要时ip和hostname为一个统一格 ...
- 使用matlab进行空间拟合
假设有这么一组数据, x=[4 5 6 7 8 4 8 10]'; y=[56 56 56 56 56 60 60 60]';z=[6 6 6 9 6 19 6 6]'; 要求出其平面方程z=C+Ax ...
- Android基础总结(二)
常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...
- poi导出的excel的数字小数位过多?
最近在使用Apache的POI组件对Excel进行操作,在对excel导出的时候,导出的数字本来只有两位小数,得到的结果就变成了很多位小数.如下面的图所示: 虽然对单元格使用了setCellStyle ...