如何使用 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> 标签来定义列表的元素。

  • 在表单中，定义 ‘options’ 后，我们将使用 <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+ 次浏览

启动你的职业生涯

完成课程后获得认证

开始学习
广告