<tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
    <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
    <em id="fuft6"><acronym id="fuft6"></acronym></em>
          <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>
          首頁技術文章正文

          怎樣使用select控件制作下拉菜單效果?select教程

          更新時間:2021-09-27 來源:黑馬程序員 瀏覽量:

          瀏覽網頁時,經常會看到包含多個選項的下拉菜單如選擇所在的城市、出生年月、興趣愛好等。下按菜單,例Vowo日(Vono,示即為一個下拉菜單,當單擊下拉符號時,會出現一個選擇列表。要想制作這種下拉菜單效果,就需會出用select控件。

          使用<select>標記定義下拉菜單的基本語法格式如下:

          <select>
          <option>選項1</option>
          <option>選項2</option>
          <option>選項3</option>
          ...
          </select>

          在上面的語法中,<select></select>標記用于在表單中添加一個下拉菜單,<option></option>標記嵌套在<select></select>標記中,用于定義下拉菜單中的具體選項,每對<select></select>中至少應包含一對<option></option>。

          值得一提的是,在HTML中,可以為<select>和<coptiono>標記定義屬性,以改變下拉菜的外觀顯示效果,具體如表10-8所示。

          表10-8 <select>和<option>標記的常用屬性

           1632734233829_常用屬性.png

          在實際網頁制作過程中,有時候需要對下拉菜單中的選項進行分組,這樣當存在很多選項時,找到相應的選項會更加容易。圖10-17所示即為選項分組后的下拉菜單中選選項展示效果。

          1632734247561_城市下拉菜單.jpg 

          要想實現圖10-17所示的效果,可以在下拉菜單中使用<optgroup></optgroup>標記,具體示例代碼如下:

          日本行政級別:
          <select>
          <optgroup label="都">
          <option>東京都</option>
          </optgroup>
          <optgroup label="道">
          <option>北海道</option>
          </optgroup>
          <optgroup label="府">
          <option>京都府</option>
          <option>大阪府</option>
          </optgroup>
          <optgroup label="縣">
          <option>青森縣</option>
          <option>巖手縣</option>
          <option>...</option>
          </select>

          示例代碼對應效果,當單擊下拉符號時,效果如圖10-19所示,下拉菜單中的選項被清晰地分組了。

          1632734267217_日本行政級別.png 

          圖10-19選項組后的下拉菜單






          猜你喜歡:

          Js變量轉為字符串類型有哪些方法?

          DeepLab系列各有什么特點?

          如何制作HTML模板?[web前端培訓]

          為什么要使用input控件?

          黑馬程序員web前端開發課程

          在線咨詢 我要報名
          和我們在線交談!

          黄色网站片

          <tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
            <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
            <em id="fuft6"><acronym id="fuft6"></acronym></em>
                  <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>