如何使用 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+ 次查看

开启你的职业生涯

通过完成课程获得认证

开始学习
广告