如何使用JavaScript以程式設計方式預選下拉選單？

在本教程中，我們將學習如何使用JavaScript以程式設計方式預選下拉選單。

下拉選單是一個切換選單，允許使用者從多個選項中選擇一個。此列表中的選項在此處進行編碼定義，並連結到一個唯一的函式。當您單擊或選擇此選項時，該函式將被觸發並開始工作。下拉列表允許我們僅從選項列表中選擇一項。

要在HTML中構建基本下拉列表，將<select>標籤與<option>標籤組合使用。之後，JavaScript將幫助執行此列表上的操作。除此之外，您可以使用容器標籤<div>建立下拉列表。

在其中插入下拉專案和連結。要開啟下拉選單，您可以使用任何元素，例如<button>、<a>或<p>標籤。

以下是學習如何使用JavaScript預選下拉列表的方法。

使用selectedIndex屬性

select元素的selectedIndex屬性允許您指定或返回從下拉列表中選擇的選項索引。索引值從零開始。

如果您從下拉列表中選擇多個專案，則索引將作為列表中的第一個元素返回。如果下拉列表允許多個選項，則將返回所選第一個專案的索引。數字“-1”將停用所有選項（如果有）。

如果沒有選擇任何選項，則selectedIndex屬性返回-1。首先，我們將一個select元素新增到HTML。我們將為此select元素分配一個下拉ID。

語法

document.getElementById("dropdown_menu").selectedIndex = "2";

使用getElementById()方法獲取下拉列表的ID，並使用selectedIndex屬性將該列表的索引選擇到第三個索引。

示例

在下面提到的示例中，我們使用HTML的<form>元素建立了兩個下拉列表。第一個下拉列表顯示要選擇的音樂型別，並提供流行音樂、搖滾樂、獨立音樂、古典音樂和金屬音樂的選項。

第二個下拉列表顯示相應的藝術家供選擇，例如泰勒·斯威夫特、魔力紅樂隊、The Local Train樂隊、猶大祭司樂隊和拉維·香卡。

selectedIndex屬性預選了第一個下拉列表中的第2個索引（獨立音樂），如輸出所示。從第二個下拉列表中，預選了第1個索引（魔力紅樂隊），如輸出所示。索引值從0開始。

<html>
<body>
   <h4>Preselect dropdown list using <i>selectedIndex property</i> in
   JavaScript</h4>
   <p id="root">Select type of music from the first dropdown list:</p>
   <form id = "myForm1">
      <select id="dropdown1" name="dropdown1" class="form-control">
         <option value = "Pop">Pop</option>
         <option value = "Rock">Rock</option>
         <option value = "Indie">Indie</option>
         <option value = "Classical">Classical</option>
         <option value = "Metal">Metal</option>
      </select>
   </form>
   <p id="root">Select the artist from the second dropdown list:</p>
   <form id = "myForm2">
      <select id="dropdown2" name="dropdown2" class="form-control">
         <option value = "Taylor Swift">Taylor Swift</option>
         <option value = "Imagine Dragons">Imagine Dragons</option>
         <option value = "The Local Train">The Local Train</option>
         <option value = "Ravi Shankar">Ravi Shankar</option>
         <option value = "Judas Priest">Judas Priest</option>
      </select>
   </form>
   <script>
      document.getElementById("dropdown1").selectedIndex = "2";
      document.getElementById("dropdown2").selectedIndex = "1";
   </script>
</body>
</html>

使用value屬性

value屬性指定頁面載入時元素中顯示的預設值。此屬性存在於表單控制元件和一些其他HTML元件中。

對於某些控制元件，HTML中的value屬性和JavaScript中的value屬性的行為有所不同。

value屬性可用於指定初始值；但是，value屬性包含控制元件的實際值。在JavaScript中，使用defaultValue屬性來獲取或設定初始值。

語法

var drop1 = document.getElementById("dropdown_menu");
drop1.value = "Gymnastics";

使用getElementById()方法獲取下拉列表的ID。將其儲存到drop1變數中。使用value屬性選擇具有“體操”值的該下拉列表的索引。

示例

在此示例中，我們使用HTML <form>元素構建了兩個下拉列表。第一個下拉列表允許您在游泳、射箭、擊劍、體操和舉重等奧運專案之間進行選擇。第二個下拉列表顯示相應的運動員，例如邁克爾·菲爾普斯、迪皮卡·庫馬裡、巴瓦納·德維、西蒙·拜爾斯和賽科姆·米拉拜·查努。

變數drop1獲取第一個下拉列表的元素ID並存儲其值。然後將drop1值設定為“體操”以使用value屬性預選該值。類似地，變數drop2檢索並儲存第二個下拉列表的元素ID。然後使用value屬性將drop2元素設定為“賽科姆·米拉拜·查努”。

<html>
<body>
   <h3>Preselect dropdown list using <i>value property</i> in
   JavaScript</h3>
   <p id = "root">Select type of olympic sport from the first dropdown
   list:</p>
   <form id = "myForm1">
      <select id = "dropdown1" name = "dropdown1" class = "formcontrol">
         <option value = "Swimming">Swimming</option>
         <option value = "Archery">Archery</option>
         <option value = "Fencing">Fencing</option>
         <option value = "Gymnastics">Gymnastics</option>
         <option value = "Weightlifting">Weightlifting</option>
      </select>
   </form>
   <p id = "root">Select the player from the second dropdown list:</p>
   <form id = "myForm2">
      <select id = "dropdown2" name = "dropdown2" class = "formcontrol">
         <option value = "Michael Phelps">Michael Phelps</option>
         <option value = "Deepika Kumari">Deepika Kumari</option>
         <option value = "Bhavana Devi">Bhavana Devi</option>
         <option value = "Simone Biles">Simone Biles</option>
         <option value = "Saikhom Mirabai Chanu">Saikhom Mirabai
         Chanu</option>
      </select>
   </form>
   <script>
      var drop1 = document.getElementById("dropdown1");
      drop1.value = "Gymnastics";
      var drop2 = document.getElementById("dropdown2");
      drop2.value = "Saikhom Mirabai Chanu";
   </script>
</body>
</html>

在本教程中，我們學習瞭如何使用兩種方法以程式設計方式使用JavaScript預選下拉選單，即一種使用selectedIndex屬性，另一種使用value屬性。這兩種方法都非常有效，您可以輕鬆地預選下拉選單的值。

更新於：2022年9月15日

2K+ 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始學習
廣告