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

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

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

要在 HTML 中構建基本的下拉列表，<select> 選項卡與 <option> 選項卡結合使用。之後，JavaScript 幫助對該列表執行操作。除此之外，您可以使用容器選項卡 <div> 建立下拉列表。

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

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

使用 selectedIndex 屬性

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

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

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

語法

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

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

示例

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

第二個下拉列表顯示相應的藝術家以供選擇，例如泰勒·斯威夫特、魔力紅、The Local Train、裘蒂斯·普里斯特和拉維·香卡爾。

selectedIndex 屬性從第一個下拉列表中預選第二個索引“獨立”，如輸出所示。從第二個下拉列表中，預選第一個索引，即“魔力紅”，如輸出所示。索引值從 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>

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

更新於：2022 年 9 月 15 日

2K+ 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告