JavaScript 如何创建具有数组值的下拉列表

概述

通过使用数组，可以在不影响网页前端的情况下获得下拉列表中的选项。在数组中，我们可以存储许多选项或值。因此，无需直接将这些值放入代码中的select标签的HTML部分中，我们可以从数组中渲染它们，从而轻松添加更多值而不影响页面的用户界面（UI）。

方法

这是一种非常简单的技术，通过使用这种技术，我们可以轻松地将选项值渲染到我们的列表中。通过使用数组，我们可以将所有String类型的值存储在一个变量中，从而降低空间复杂性。我们还有许多函数，如“for”，“foreach”，“map()”，通过使用这些函数，我们可以遍历数组并渲染值。

语法

创建下拉列表的语法如下：

<select name="" id="">
   <option value=""></option>
   <option value=""></option>
</select>

步骤

步骤1 - 创建一个HTML代码模板。为了在HTML中创建下拉列表，我们使用select标签创建下拉选项，使用option标签创建列表。

<select>
   <option></option>
   <option></option>
</select>

步骤2 − 用选项作为元素初始化一个数组，并且创建一个空的字符串类型变量。

var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];

步骤3 - 现在使用数组的map方法，将数组的值映射到下拉列表的选项。使用连接技术将选项连接到下拉列表中。

arr.map((op,i)=>{
   options+=`<option value=" ${op}" id="$ {i}" style="border-radius: 5px;"">${op}</option>`
})

步骤4 − 现在，options变量包含来自数组的选项列表。将数组的渲染值作为列表显示在下拉菜单中。

document.getElementById("arrayDropdown").innerHTML=options;

步骤5 − 所有渲染的选项将显示在下拉列表中，并且可以随时使用。

示例

在此示例中，我们从一个数组中渲染了选项的值。使用 map() 函数，我们迭代了选项标签的数组，并与一个字符串类型的变量连接起来。然后，我们使用 innerHTML() 方法将输出显示到选择标签中。

<html>
<head>
   <title>Create a dropdown with array rendered option</title>
</head>
<body>
   <h2>Dropdown list with array rendered options</h2>
   <select id="arrayDropdown" style="outline:none;padding: 0.4rem;border-radius: 5px; border: none; box-shadow: 0 0 10px rgb(202, 202, 202);margin: 0.8rem;"></select>
   <script>
      var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];
      var options="";
      arr.map((op,i)=>{
         options+=`<option value=" ${op}" id="$ {i}" style="border-radius: 5px;"">${op}</option>`
      })
      document.getElementById("arrayDropdown").innerHTML=options;
   </script>
</body>
</html>

下面的图像显示了上面示例的输出。这只是说明了我们如何将数组渲染为HTML的选项列表。因此，如果您想使其更加交互，我们可以使用Bootstrap组件，使样式更加美观。

结论

这种方法是渲染下拉列表选项值的最佳方法。其主要优点是它具有动态性，使得操作数组变得更容易，这意味着我们可以轻松地更新、添加和删除数组中的选项。由于我们已经创建了一个选项列表数组，所以它严格遵循”Don’t Repeat Yourself”（不要重复自己）原则。它可以作为一个组件在网页的任何位置渲染，只需开发一些用户界面（UI）即可。