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. java多线程系类:JUC原子类:03之AtomicLongArray原子类

    概要 AtomicIntegerArray, AtomicLongArray, AtomicReferenceArray这3个数组类型的原子类的原理和用法相似.本章以AtomicLongArray对数 ...

  2. BZOJ 2115 【Wc2011】 Xor

    Description Input 第一行包含两个整数N和 M, 表示该无向图中点的数目与边的数目. 接下来M 行描述 M 条边,每行三个整数Si,Ti ,Di,表示 Si 与Ti之间存在 一条权值为 ...

  3. cf Round 607

    A.Chain Reaction(DP+二分) 题意:一排有n个灯塔,每个灯塔给出坐标xi和力量yi,每次从最右边依次点亮灯塔,每点亮一个灯塔,它左边的距离它yi范围内的灯塔将受到损坏.现在允许在最右 ...

  4. caffe的python接口学习(6):用训练好的模型(caffemodel)来分类新的图片

    经过前面两篇博文的学习,我们已经训练好了一个caffemodel模型,并生成了一个deploy.prototxt文件,现在我们就利用这两个文件来对一个新的图片进行分类预测. 我们从mnist数据集的t ...

  5. MySQL大小写补坑记

    背景:由于项目开始时数据库设计经验不足,数据库名和部分数据表名都含有大写字母.但问题是,Linux上数据库名和表名是区分大小写的,而Windows上是不区分大小写的.结果就是在看本地的数据库的时候,对 ...

  6. 计算机中位(bit), 字节(byte), 字(word)的关系

    1.位(bit) 来自英文bit,音译为“比特”,表示二进制位.位是计算机内部数据储存的最小单位,11010100是一个8位二进制数.一个二进制位只可以表示0和1两种状态(21):两个二进制位可以表示 ...

  7. ARC下OC对象和CF对象之间的桥接(bridge)

    在开发iOS应用程序时我们有时会用到Core Foundation对象简称CF,例如Core Graphics.Core Text,并且我们可能需要将CF对象和OC对象进行互相转化,我们知道,ARC环 ...

  8. icon图标

     http://images2015.cnblogs.com/blog/575577/201609/575577-20160901194344636-1596119396.png  http://im ...

  9. javaweb局部刷新-ajax异步请求springMVC显示返回的jsp内容,代替iframe

    在jsp上要引入jquery <script src="<%=request.getContextPath()%>/js/jquery_ui/jquery.js" ...

  10. JS中匿名函数$(function(){ })和(function(){})()的区别

    “$(function(){ });” Jquery语法的匿名函数,用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在: (通过这样就可以在页面加载完成时通过ajax再异步加载一些数据) “ ...