zoukankan      html  css  js  c++  java
  • HTML中的下拉列表 select

    HTML中的下拉列表: 

    Html代码  收藏代码
    1. <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标签中! 

  • 相关阅读:
    HIDS逐渐的成为主流 java程序员
    怎样做反向域名解析(反向DNS解析)? java程序员
    入侵检测系统的性能的辨别(2) java程序员
    Codeforces Round #146 (Div. 2)
    usaco1.34Prime Cryptarithm
    poj3667 hotel(线段树区间合并)
    poj1330Nearest Common Ancestors(水LCA)
    hdu4135Coprime(容斥原理)
    hdu1541Stars(树状数组)
    usaco 1.43Arithmetic Progressions
  • 原文地址:https://www.cnblogs.com/mengfff/p/5100285.html
Copyright © 2011-2022 走看看