html中關於下拉式清單select的圖文程式碼詳解

黄舟
發布: 2017-07-26 09:53:57
原創
3431 人瀏覽過

HTML中的下拉清單: 

Html程式碼  html中關於下拉式清單select的圖文程式碼詳解

<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程式碼  html中關於下拉式清單select的圖文程式碼詳解

<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程式碼  html中關於下拉式清單select的圖文程式碼詳解

#
<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程式碼  html中關於下拉式清單select的圖文程式碼詳解

<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程式碼  html中關於下拉式清單select的圖文程式碼詳解

<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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板