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. 导出本地和远程SVN项目, Export remote SVN repository

    在有服务器控制权的情况下, 源服务器上 sudo svnadmin dump ironbank/ > ~/ironbank.svn.dump 在目的服务器上 sudo svnadmin crea ...

  2. 新项目,WebTest

    最近为了给Jumony for ASP.NET进行单元测试有点伤神,ASP.NET因为环境特殊,一直是单元测试的禁地,传统的单元测试工具由于运行在非ASP.NET环境,可谓是举步维艰.当然,微软在搞A ...

  3. linux显示git commit id,同时解决insmod模块时版本不一致导致无法加载问题

    linux内核默认会包含git的commit ID. 而linux的内核在insmod模块时,会对模块和内核本身的版本做严格的校验.在开发产品时,改动内核后,由于commit ID变更,会导致linu ...

  4. hdu2874 LCA在线算法

    Connections between cities Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  5. rcync 备份命令

    不写复杂的命令参数什么意思,网上一搜一大堆. 这是我用的命令: rsync -ax --progress -e "ssh -p 12345" --delete root@143.2 ...

  6. 借One-Class-SVM回顾SMO在SVM中的数学推导--记录毕业论文5

    上篇记录了一些决策树算法,这篇是借OC-SVM填回SMO在SVM中的数学推导这个坑. 参考文献: http://research.microsoft.com/pubs/69644/tr-98-14.p ...

  7. php 做数学运算时结果为0的原因

    php是一种弱类型的脚本语言,一般情况下字符串型的数字可以直接参与运算. 但是当字符串开头是实体空格的时候系统会默认字符串等于0. 此问题比较隐蔽,在此记录下

  8. webpack-dev-server

    webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务.它 ...

  9. js 时间相关函数

    实例: <!doctype html> <html> <head> <meta charset="utf-8"> <title ...

  10. arguments 对象的老历史

    引题:为什么 JavaScript 中的 arguments 对象不是数组 http://www.zhihu.com/question/50803453 JavaScript 1.0 1995 年, ...