如何使用 JavaScript 选择下拉列表中的多个选项？

在本教程中，我们将学习如何使用 JavaScript 选择下拉列表中的多个选项。基本上，我们将创建两个按钮，一个是下拉按钮，其中我们提供多个选项，另一个是连接到multiFunc()函数的普通按钮，并带有下拉按钮的 id，当我们点击此按钮时，我们就可以在下拉按钮中选择多个选项。

在本教程中，我们使用了 JavaScript 的两个属性，一个是 DOM 属性，即document.getElementById，另一个是用于一次选择多个选项的 multiple 属性。

语法

现在让我们来看一下使用 JavaScript 选择下拉列表中多个选项的语法：

function multipleFunc() {
   document.getElementById("mySelect").multiple = true;
}

在上述语法中，我们得到了函数名称“multipleFunc”。顾名思义，此函数允许我们一次选择多个选项。在此函数中，我们使用 DOM，使用具有 multiple 属性的下拉按钮的 id 并将其设置为 true。并且此“multipleFunc”连接到一个普通按钮，因此当我们点击此按钮以激活“multipleFunc”函数以在下拉按钮中选择多个选项时。

算法

我们上面已经看到了使用 JavaScript 选择下拉列表中多个选项的语法，现在我们将逐步查看完整的步骤：

  • 步骤 1 - 首先，我们创建一个表单，在其中使用 HTML 的 select 标签创建一个下拉按钮，并带有其自己的 id，并且在 select 标签中，我们必须在 HTML 代码的主体中创建多个选项。

  • 步骤 2 - 在表单中，在下拉按钮之后，我们使用 input 标签创建另一个按钮，并使用 type、onclick 和 value 属性，这些属性通过onclick属性连接到“multiFunc”函数，以允许我们一次在下拉按钮中选择多个选项。

  • 步骤 3 - 在按钮的onclick属性中，我们必须传递multipleFunc，当我们点击此按钮时，它将调用此函数。

  • 步骤 4 - 在 script 标签中，我们必须定义一个multiFunc，在其中我们必须使用 javascript 的 DOM 属性，即document.getElementById，在其中我们必须传递下拉按钮的 id。

  • 步骤 5 - 然后进一步，我们使用 JavaScript 的 multiple 属性并将其设置为 true，这有助于用户一次选择多个选项。

我们已经看到了使用 JavaScript 选择下拉列表中多个选项的语法和算法，现在让我们举一个例子来实现上面讨论的步骤。

示例

在这个例子中，我们将使用一个表单，其中包含一个下拉按钮和一个连接到 multipleFunc 的普通按钮，然后借助 JavaScript 属性，我们就可以在下拉列表中选择多个选项。

<!DOCTYPE html>
<html>
<body>
   <form id="myForm">
   <select id="mySelect">
   <option>One</option>
   <option>Two</option>
   <option>Three</option>
   </select>
      <input type="button" onclick="multipleFunc()" value="Select multiple options">
   </form>
   <p>Press CTRL and click the above button to select multiple options at once.</p>
   <script>
      function multipleFunc() {
         document.getElementById("mySelect").multiple = true;
      }
   </script>
</body>
</html>

在上面的代码中，我们首先创建一个表单，在其中创建两个按钮。第一个是使用 HTML 的 select 标签创建的下拉按钮，并带有其自己的 id，第二个是使用 input 标签创建的普通按钮，在其中我们传递 type、onclick 和 value。当我们点击第二个按钮时，它会调用函数“multiFunc”，它通过 onclick 函数连接。multiFunc是为允许用户一次选择多个选项而创建的，因此在此函数中，我们使用 DOM 属性document.getElementById和下拉按钮的 id，以及 'multiple' 属性，并将其赋值为 'true'。

您可以看到输出图像，在第一张图像中，选项下拉按钮和普通按钮，但我们无法一次在下拉按钮中选择多个选项，然后我们点击选择多个选项按钮，我们就可以在下拉按钮中选择多个选项，如您在第二张图片中看到的。

结论

在本教程中，我们学习了如何使用 javascript 选择下拉列表中的多个选项。此外，我们学习了如何使用 input 创建一个带有下拉按钮和普通按钮的表单，并通过 onclick 属性连接到 'multipleFunc' 函数，在该函数中，我们使用 javascript 的 dom 属性“document.getElementById”和 javascript 的 multiple 属性，该属性允许我们一次选择多个选项。

更新于: 2022-11-07

11K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告