html中关于下拉列表select的图文代码详解

黄舟
发布: 2017-07-26 09:53:57
原创
3426 人浏览过

HTML中的下拉列表: 

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是真正需要提交到服务端的值。
显示效果如下所示:


更复杂的下拉列表:

Html代码 收藏代码

<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参数:

Html代码 收藏代码

<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属性

Html代码 收藏代码

<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属性

Html代码 收藏代码

<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标签中! 

以上是html中关于下拉列表select的图文代码详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板