HTML中的下拉列表:

  1. <select>
  2. <option value ="1">Volvo</option>
  3. <option value ="2">Saab</option>
  4. <option value="3">Opel</option>
  5. <option value="4">Audi</option>
  6. </select>

其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文本内容(text content)是下拉列表项目中显示到页面上的值,value是真正需要提交到服务端的值。
显示效果如下所示:

更复杂的下拉列表:

  1. <select>
  2. <optgroup label="Swedish Cars">
  3. <option value="1">Volvo</option>
  4. <option value="2">Saab</option>
  5. </optgroup>
  6. <optgroup label="German Cars">
  7. <option value="3">Mercedes</option>
  8. <option value="4">Audi</option>
  9. </optgroup>
  10. </select>

这个下拉列表包含一个“项目组”(item group),这个组是无法选择的,使用label标签标记字面内容,真正起作用的,还是value属性。
看一下这个包含“项目组”的下拉列表

option中的参数:selected="selected"
如果需要打开页面就默认选中某个option,需要用到selected参数:

  1. <select>
  2. <option value="1">Volvo</option>
  3. <option value="2">Saab</option>
  4. <option value="3" selected="selected">Mercedes</option>
  5. <option value="4">Audi</option>
  6. </select>

option中的参数:disabled="disabled"
如果需要禁用某个项目,但是却又不想隐藏,可以使用disabled属性

  1. <select>
  2. <option value="1">Volvo</option>
  3. <option value="2">Saab</option>
  4. <option value="3" disabled="disabled">Mercedes</option>
  5. <option value="4">Audi</option>
  6. </select>

option中的参数:title
如果需要在鼠标放到某个项目上时,给出提示,可以使用title属性

  1. <select>
  2. <option value="1">Volvo</option>
  3. <option value="2">Saab</option>
  4. <option value="3">Mercedes</option>
  5. <option value="4" title="Audi, your best choice!">Audi</option>
  6. </select>

其实,title也可以用在很多其他的HTML标签中!

下拉列表 select-option ; select-optgroup-option的更多相关文章

  1. HTML 表单和输入<textarea><label><fieldset><legend><select><optgroup><option><button>

    textarea><label><fieldset><legend><select><optgroup><option>& ...

  2. Html select、option、optgroup 标签

    Html select 标签 </body> </html> <!-- select外部下拉选择框.name="xxx"标识后端获取名称 --> ...

  3. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

  4. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  5. js获取select默认选中的Option (非当前选中值)

    js函数方法: <script> function getDefaultSelectedOption(selectId, valIfNull) { var selectId = selec ...

  6. 地址选择的,弹出的下拉。select。通过《option》《/option》来隔开

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. select获取选中的option(包含value和text,重点是text怎么获取)

    简单描述:后台需要获取到select标签选择的内容,也就是text,该怎么取呢?很简单. 代码: //hml代码<div class="col-md-6"> <l ...

  8. 获取select被选中的option的值

    <select id="select">      <option>绥江</option>      <option>西江</ ...

  9. 项目总结09:select标签下封装option标签

    项目中经常用到Select标签,用封装好的方法获取option,可以避免冗赘的代码: 1.JSP--标签 <select class="width_md" name=&quo ...

  10. HTML标签 select 里 动态添加option

    HTML标签 select 里 动态添加option: ☆ var today = new Date(); var yearNow = today.getFullYear(); var optiong ...

随机推荐

  1. ThinkPHP常用查询

    1.常规 $map2['state'] = 1; $User->where ( $map2 )->find(); 2. OR 查询 $where['name'] = array('neq' ...

  2. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 检查版本升级、检查登录超时

    当用户都在一个公司内,甚至一个办公室时,喉一下或者跑过去亲自更新一下程序,就可以了,问题就很简单也没多少复杂性,也不怎么考验技术能力.当面对全国10万以上客户端时,问题就来了. 1:有的用户打开系统一 ...

  3. 关于javascript中apply()和call()方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...

  4. JDBC连接各种数据库的地址名称

    oracle    driverClass:oracle.jdbc.driver.OracleDriver    url:jdbc:oracle:thin:@127.0.0.1:1521:dbname ...

  5. 实现简单sed替换功能的python脚本

    #可以用来修改配置文件参数 # -*- coding:utf-8 -*- import os,sys old = sys.argv[1] new = sys.argv[2] file = sys.ar ...

  6. 并查集(union-find)算法

    动态连通性 . 假设程序读入一个整数对p q,如果所有已知的所有整数对都不能说明p和q是相连的,那么将这一整数对写到输出中,如果已知的数据可以说明p和q是相连的,那么程序忽略p q继续读入下一整数对. ...

  7. PHP "延迟静态绑定" 功能,static

    从这个名字的定义提取出两个关键点,第一点静态,也就是说这个功能只适用于静态属性或静态方法.第二点延迟绑定,这个根据下面代码就可以很好的理解 看一下这个例子: class A{ static $name ...

  8. [CG编程] 基本光照模型的实现与拓展以及常见光照模型解析

    0.前言 这篇文章写于去年的暑假.大二的假期时间多,小组便开发一个手机游戏的项目,开发过程中忙里偷闲地了解了Unity的shader编写,而CG又与shaderLab相似,所以又阅读了<CG教程 ...

  9. BZOJ 3230: 相似子串

    3230: 相似子串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1485  Solved: 361[Submit][Status][Discuss ...

  10. js jquery 选择器总结

    js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...