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. RCW 生存期控制

    RCW是.net 对com的包装,比如office就是通过RCW来被.net调用的.可以百度:office pia 了解更多信息. RCW 是一个.net类. 1.关闭线程对rcw的自动清理 Syst ...

  2. 第二次团队作业 -- 预则立&&他山之石

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬涛 一.团队任务计划 周数 ...

  3. Xcode调试技巧(断点和重构)

    首先是最简单的普通断点有时候不知道是那个方法调用的崩溃的这个方法,传了个奇怪的值,打个断点就就可以在左侧工具栏里看到最近几个方法执行的循序,和那个方法调用的本方法,一般小问题在这里就可以解决啦~ 条件 ...

  4. Python学习之day2

    1.执行Python脚本时打印的字符有颜色 print "\033[32;1mhello\033[0m" #打印绿色 print "\033[31;1mhello\033 ...

  5. [转]Java compiler level does not match解决方法

    查看链接:http://jingyan.baidu.com/article/95c9d20da3ec5fec4e756186.html

  6. SQL查询语句 常用示例

    SQL语言的应用 1.     找出姓李的读者姓名和所在单位. 2.     列出图书库中所有藏书的书名及出版单位. 3.     查找高等教育出版社的 所有图书及单价,结果按单价降序排序. 4.   ...

  7. PHP -- Perl风格正则表达式

    1.正则表达式作为一个匹配的模版,是由原子(普通字符,例如a-z),有特殊功能的字符(元字符,例如*.+ 和?等),以及模式修正符三个部分组成.2.在于Perl兼容的正则表达式函数中使用模式时一定要给 ...

  8. JSVirtualMachine与JSContext

    JSVirtualMachine相当于进程: JSContext相当于线程:

  9. lua学习例子

    extern "C"{ #include <lua.h> #include <lauxlib.h> #include <lualib.h> } ...

  10. Container View 使用小技巧

    一.传值,顺传 -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { TVC *vc = segue.destin ...