如何使用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+ 次浏览

启动您的职业生涯

完成课程后获得认证

开始学习
广告