如何使用 JavaScript 从下拉列表中删除选项?
本教程教我们如何使用 JavaScript 从下拉列表中删除选项。通常，用户很少有机会从下拉列表中删除任何选项，但如果程序员提供了该选项，则这是可能的。
如果程序员想要提供删除下拉列表的选项，那么在 JavaScript 中，可以借助 remove() 方法来实现。使用 DOM，用户可以选择要删除的选项，并通过提供函数将其传递给 remove 方法，从而将其删除。让我们详细了解整个过程。
语法
remove() 方法的语法是 −
var element = document.getElementById( "selectNow" ); element.remove( element.selectedIndex );
在上述语法中，"selectNow"是定义选项的下拉列表的 ID。我们使用 DOM 的"getElementById"方法获取下拉列表并将其存储在变量中。
之后，通过使用函数 remove()，我们删除了"selectedIndex"元素，并将其作为 remove() 函数的参数传递。此外，"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"方法获取元素，用户可以将其删除。
