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

开启你的 职业生涯

通过完成课程获得认证

开始
广告