html中對于下拉下文select的圖文代碼詳細(xì)說明

Html代碼

<select>  
  <option value ="1">Volvo</option>  
  <option value ="2">Saab</option>  
  <option value="3">Opel</option>  
  <option value="4">Audi</option>  
</select>

其中select是顯示一個(gè)下拉列表(drop down list)出來，option是下拉列表中的項(xiàng)目(item)，而option的文本內(nèi)容(text content)是下拉列表項(xiàng)目中顯示到頁面上的值，value是真正需要提交到服務(wù)端的值。
顯示效果如下所示：


更復(fù)雜的下拉列表：

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>

這個(gè)下拉列表包含一個(gè)“項(xiàng)目組”(item group)，這個(gè)組是無法選擇的，使用label標(biāo)簽標(biāo)記字面內(nèi)容，真正起作用的，還是value屬性。
看一下這個(gè)包含“項(xiàng)目組”的下拉列表


option中的參數(shù)：selected="selected"
如果需要打開頁面就默認(rèn)選中某個(gè)option，需要用到selected參數(shù)：

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中的參數(shù)：disabled="disabled"
如果需要禁用某個(gè)項(xiàng)目，但是卻又不想隱藏，可以使用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中的參數(shù)：title
如果需要在鼠標(biāo)放到某個(gè)項(xiàng)目上時(shí)，給出提示，可以使用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>

其實(shí)，title也可以用在很多其他的HTML標(biāo)簽中！

以上就是html中關(guān)于下拉列表select的圖文代碼詳解的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！