如何使用 JavaScript 从下拉列表中删除选项？

本教程将教我们如何使用JavaScript从下拉列表中删除选项。通常，用户不会经常获得从下拉列表中删除任何选项的选项，但如果程序员提供了该选项，则这是可能的。

如果程序员想要提供删除下拉菜单的选项，那么在 JavaScript 中，可以使用remove()方法来实现。使用 DOM，用户可以选择要删除的选项，并通过提供一个函数将其传递给 remove 方法，该方法将删除它。让我们详细了解并理解整个过程。

语法

remove() 方法的语法如下：

var element = document.getElementById( "selectNow" );
element.remove( element.selectedIndex );

在上述语法中，“selectNow”是定义选项的下拉列表的 id。我们使用了 DOM 的‘getElementById’方法获取下拉列表并将其存储在一个变量中。

之后，使用函数remove()，我们通过将其作为 remove() 函数的参数删除了‘selectedIndex’元素。此外，‘selectedIndex’将返回我们想要删除的选项，并且我们必须在删除它之前选择它。

注意 - ‘selectedIndex’是预定义的方法，它将返回用户选择的索引值。

算法

我们已经看到了从列表中删除选项的语法，让我们一步一步地查看完整的算法，以便更好地理解它：

创建表单或下拉菜单

在这些步骤中，我们将创建一个表单，在其中我们将定义或创建下拉菜单和一个按钮，该按钮将调用函数以从下拉列表中删除对象。

  • 最初，我们必须使用<form>标签创建一个表单，其中将包含我们的下拉列表。

  • 我们将使用<select>标签创建一个列表，并为其提供一些‘id’以便在引用时提供一些名称。

  • 在<select>标签下，我们将使用<option>标签定义列表的元素。

  • 在定义了‘选项’的表单中，我们将使用<input>标签定义一个输入字段，并将其设置为按钮类型，并且我们将定义‘onclick’事件，该事件将调用我们稍后在脚本中定义的函数。

定义用于删除的脚本或函数

在这些步骤中，我们将定义将在上述定义的按钮的‘onclick’事件中调用的函数。

  • 最初，我们将使用‘function’关键字创建一个函数，并为其指定一个名称，该名称将在‘onclick’事件中调用。

  • 在定义的函数中，我们将创建一个变量来存储从对‘document.getElementById()’方法的调用返回的值。

  • 我们将上述定义的下拉菜单的‘id’作为参数传递给对‘document.getElementById()’方法的调用。

  • 通过使用带有变量（包含对该方法的调用的返回值）的 remove 方法并使用‘selectedIndex’方法传递参数以删除选项，我们将删除所需的选项。

这些是从下拉菜单中删除选项的基本步骤，现在让我们看一些示例，以便更好地理解上述步骤。

示例

在此示例中，我们将逐步实现上述定义的算法，以删除给定下拉菜单的元素，让我们实现代码：

<!DOCTYPE html>
<html>
<body>
   <p>Select any option and click the button to remove the selected option.</p>
   <form id = "myForm">
   <select id = "id_dropdown">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
   </select>
<input type = "button" onclick = "fun_remove()" value = "Click to Remove">
</form>
   <script>
      function fun_remove() {
         var element = document.getElementById("id_dropdown");
         element.remove(element.selectedIndex);
      }
   </script>
</body>
</html>

在上述输出中，我们得到一个下拉列表和一个按钮来删除选定的元素。通过单击“单击以删除”按钮，我们可以删除列表中可见或选定的元素。

结论

在本文中，我们学习了从下拉菜单中删除选项的方法。这只有在定义下拉菜单时，程序员为用户定义或创建了一个按钮来删除选项时才有可能。要删除任何选项，用户必须选择它，并使用 remove() 函数以及通过‘getElementById’和‘selectedIndex’方法获取元素，用户可以删除它。

更新于：2022年11月7日

12K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告