从 JavaScript 的 select 列表中移除选项

在本文中，我们将通过 JavaScript 来理解如何从 select 列表中移除选项。文章开始时，我们将学习 JavaScript、<select> 标签以及 JavaScript 中的 remove 方法的一些基本知识。之后，我们将通过一些示例来理解本文内容。

JavaScript 是什么意思？

JavaScript 是一种面向对象的高级语言，它可以访问网页中包含的各种 HTML 对象。

remove() 方法

remove() 方法用于在 JavaScript 中从 select 列表中移除选定的元素。

语法 1

示例： $("p").remove();

语法 2

示例： $("#select1 option[value='hello']").remove();

<select> 标签是什么意思？

与 HTML 中用于定义列表的 无序列表 <ul> 或 有序列表 <ol> 类似，<select> 标签 的功能也是定义一个列表。而 <option> 标签 类似于列表项 <li>，用于指定列表中的列表项。select 和 option 标签用于创建下拉菜单。它也称为下拉列表。

语法

<select> 标签表示其后的文本是一个列表，而 <option> 标签用于确定列表的项。

以下示例用于通过 JavaScript 从 select 列表中移除选项。

示例 1

说明

在此示例中，我们可以从列表中选择任何所需的选项来移除该元素。当我们点击按钮时，选定的元素将从 select 列表中移除。

以下 JS 代码用于从 select 列表中移除元素。

输出

以下是此示例的输出

在此示例中，我们从 select 列表中选择了值为“three”的选项，并在移除该元素后，输出如下。

示例 2

说明

在此示例中，您可以选择或定义 select 列表中的任何选项以进行移除。当我们点击按钮时，定义的元素将从 select 列表中移除。

以下 JS 代码用于从 select 列表中移除元素。

输出

以下是此示例的输出

在此示例中，select 列表中的“basic”选项值被预定义为要从列表中移除。当我们点击按钮时，“basic”选项值将从 select 列表中移除。以下是移除“basic”选项值后 select 列表的输出。