在開始創建下拉列表之前，了解什么是下拉列表很重要。下拉列表是一個可切換的菜單，允許用戶從多個選項中選擇一個選項。此列表中的選項在編碼中定義，與功能相關聯。當您單擊或選擇此選項時，該功能將觸發并開始執行。

大多數時候，您在注冊表單上看到了一個下拉列表，可以從下拉菜單中選擇州或城市。下拉列表允許我們從項目列表中僅選擇一項。

創建下拉列表的要點

<select>選項卡與<option>選項卡一起使用以在 HTML 中創建簡單的下拉列表。之后，JavaScript 有助于使用此列表執行操作。

除此之外，您可以使用容器選項卡<div>創建下拉列表。在其中添加下拉項目和鏈接。我們將在本章中通過一個示例來討論每種方法。

您可以使用任何元素(例如 <button>、<a>  或<p> )來打開下拉菜單。

請參閱以下示例以使用不同的方法創建下拉列表。

例子

使用<select>選項卡的簡單下拉列表

這是一個無需使用任何復雜的JavaScript代碼和CSS樣式表即可創建簡單易用的下拉列表的簡單示例。

< html >  
<頭>  
< title >使用選擇標簽的下拉菜單</ title >  
</頭>  
<腳本>  
函數 favTutorial() {  
var  mylist  = 文檔.getElementById("myList");  
document.getElementById("favourite") .value  =  mylist .options[mylist.selectedIndex].text;  
}  
</腳本>    
<身體>  
<表格>  
< b > 使用下拉列表選擇您最喜歡的教程網站 </ b >  
<選擇id  =  "myList" onchange  =  "favTutorial()" >     
<選項>  ---選擇教程---  </選項>  
<選項>  w3schools  </選項>  
<選項>  Javatpoint  </選項>  
<option> tutorialspoint </option>  
<option> geeksforgeeks </option>  
</select>  
<p> Your selected tutorial site is:   
<input type = "text" id = "favourite" size = "20" </p>  
</form>  
</body>  
</html>  

輸出

通過運行上述代碼，您將獲得與給定屏幕截圖相同的響應。它將包含一個包含教程站點列表的下拉菜單。

通過單擊從下拉列表中選擇一項。

在下面的屏幕截圖中可以看到，所選項目已顯示在輸出字段中。

可以使用其他方式創建下拉列表;請參閱下面的更多示例。

使用按鈕和 div 選項卡的下拉列表

在此示例中，我們將創建一個下拉列表，其中包含一個包含項目列表的按鈕作為下拉菜單。

< html >  
<頭>  
< title >使用按鈕的下拉菜單</ title >  
</頭>  
<風格>  
/* 設置下拉菜單的位置 */  
。落下 {  
     位置：相對；  
     顯示：內聯塊；  
}  
/* 設置網頁按鈕的大小和位置 */  
。按鈕 {  
     填充：10px 30px；  
     字體大小：15px；  
}  
/* 為列表項的背景提供 css */   
#列表項{  
    顯示：無；  
    位置：絕對；  
    背景顏色：白色；  
    最小寬度：185px；  
}  
/* 提供 css 來列出項目 */   
#list-items 一個 {  
     顯示：塊；  
     字體大小：18px；  
     背景顏色：#ddd；  
     顏色：黑色;  
     文字裝飾：無；  
     填充：10px；  
}  
</風格>   
<腳本>  
      //在按鈕點擊時顯示和隱藏下拉列表項  
      功能顯示隱藏（）{  
         var  click  =  document .getElementById("list-items");  
         if( click.style.display  ==="none") {  
            click.style.display  = "塊" ;  
         } 別的 {  
            click.style.display  = "none" ;  
         }   
      }  
   </腳本>    
<身體>  
< div類= “下拉” >   
  <button onclick="show_hide()" class="button">Choose Language</button>  
   <center>  
      <!-- dropdown list items will show when we click the drop button -->   
      <div id="list-items">  
         <a href="#"> Hindi </a>  
         <a href="#"> English </a>  
         <a href="#"> Spanish </a>  
         <a href="#"> Chinese </a>  
         <a href="#"> Japanese </a>  
      </div>  
   </center>       
</body>  
</html>  

輸出

通過單擊此下拉按鈕，您將獲得一個項目列表，您必須從該列表中選擇一個項目。請看下面的截圖：

單擊下拉列表按鈕并隱藏列表。

多個下拉列表示例

在上面的示例中，我們創建了一個下拉列表。我們現在將創建一個表單，其中包含各種在線技術主題教程列表(如C、C++、PHP、MySQL和Java )的多個下拉菜單，分為幾個類別。當用戶單擊特定的下拉按鈕時，他們各自的下拉列表將向您打開。

請參閱下面的示例如何執行此操作：

< html >  
<頭>  
<風格>  
.dropbtn {  
  背景顏色：綠色；  
  白顏色;  
  填充：14px；  
  字體大小：16px；  
  光標：指針；  
}   
.dropbtn：懸停{  
  背景顏色：棕色；  
}  
。落下 {  
  位置：相對；  
  顯示：內聯塊；  
}    
.下拉內容{  
  顯示：無；  
  位置：絕對；  
  背景顏色：白色；  
  最小寬度：140px；  
  溢出：自動；  
  盒子陰影：0px 8px 16px 0px rgba(0,0,0,0.2);  
}    
.dropdown-content 一個 {  
  顏色：黑色;  
  填充：12px 16px；  
  文字裝飾：無；  
  顯示：塊；  
}    
.dropdown a:hover {  
   背景顏色：#ddd；  
 }    
。節目 {  
  顯示：塊；  
}  
</風格>  
</頭>  
<身體>   
< h2 >使用下拉菜單的教程列表</ h2 >  
< p >點擊按鈕打開教程下拉菜單。</ p >    
< div類= “下拉” >   
  < button onclick = "programmingList()" class = "dropbtn" >編程</ button >    
  < div id = "myDropdown1"類= "下拉內容" >    
    <a href = "#java" onclick = "java()" > Java </a> _ _ _    
    <a href = "#python" onclick = "python()" > Python </a> _ _ _    
    <a href = "#c++" onclick = "cpp()" > C ++ </a> _ _    
    <a href = "#c" onclick = "c()" > C </a> _ _ _    
  </ div >  
</ div >    
< div類= “下拉” >   
  < button onclick = "databaseList()" class = "dropbtn" >數據庫</ button >    
  < div id = "myDropdown2"類= "下拉內容" >    
    <a href = "#mysql" onclick = "mysql()" > MySQL </a> _ _ _    
    <a href = "#mdb" onclick = "mDB()" > MongoDB </a> _ _ _    
    <a href = "#cass" onclick = "cassandra()" > Cassandra </a> _ _ _    
  </ div >  
</ div >    
< div類= “下拉” >   
  <button onclick="WebTechList()" class="dropbtn">Web Technology</button>  
  <div id="myDropdown3" class="dropdown-content">  
    <a href="#php" onclick="php()">PHP</a>  
    <a href="#css" onclick="css()">CSS</a>  
    <a href="#js" onclick="js()">JavaScript</a>  
  </div>  
</div>  
<script>  
/* methods to hide and show the dropdown content */  
function programmingList() {  
  document.getElementById("myDropdown1").classList.toggle("show");  
}    
function databaseList() {  
  document.getElementById("myDropdown2").classList.toggle("show");  
}      
function WebTechList() {  
  document.getElementById("myDropdown3").classList.toggle("show");  
}    
/* methods to redirect to tutorial page that user will select from dropdown list */  
function java() {  
   window.location.replace("https://www.javatpoint.com/java-tutorial");  
}  
function python() {  
   window.location.replace("https://www.javatpoint.com/python-tutorial");  
}  
function cpp() {  
   window.location.replace("https://www.javatpoint.com/cpp-tutorial");  
}  
function c() {  
   window.location.replace("https://www.javatpoint.com/c-programming-language-tutorial");  
}  
function mysql() {  
   window.location.replace("https://www.javatpoint.com/mysql-tutorial");  
}  
function mDB() {  
   window.location.replace("https://www.javatpoint.com/mongodb-tutorial");  
}  
function cassandra() {  
   window.location.replace("https://www.javatpoint.com/cassandra-tutorial");  
}  
function php() {  
   window.location.replace("https://www.javatpoint.com/php-tutorial");  
}  
function css() {  
   window.location.replace("https://www.javatpoint.com/css-tutorial");  
}  
function js() {  
   window.location.replace("https://www.javatpoint.com/javascript-tutorial");  
}    
// Close the dropdown menu if the user clicks outside of it  
window.onclick = function(event) {  
  if (!event.target.matches('.dropbtn')) {  
    var dropdowns = document.getElementsByClassName("dropdown-content");  
    var i;  
    for (i = 0; i < dropdowns.length; i++) {  
      var openDropdown = dropdowns[i];  
      if (openDropdown.classList.contains('show')) {  
        openDropdown.classList.remove('show');  
      }  
    }  
  }  
}  
</script>    
</body>  
</html>  

輸出

執行上述代碼時，將出現一個帶有三個下拉按鈕的表單。每個下拉按鈕都有一個項目列表。

單擊任何下拉按鈕以查看項目列表。

讓您點擊數據庫教程下的 MongoDB，它會將您重定向到我們的 javatpoint MongoDB 教程。如果大家想了解更多相關知識，不妨來關注一下動力節點的JavaScript教程，里面有更豐富的知識等著大家去學習，相信對大家會有所幫助的。