当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > 移除JavaScript中的选择列表选项

移除JavaScript中的选择列表选项

移除JavaScript中的选择列表选项

在本文中，我们将了解如何使用JavaScript从选择列表中移除选项。在本文开始时，我们将学习一些关于JavaScript的基础知识，以及<select>标签和JavaScript中的remove方法。之后，我们将了解一些本文的示例。

什么是JavaScript

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

remove()方法

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

语法1

$(selector).remove (selector)

示例： $(“p”).remove();

语法2

$("#FIELDID option[value='X']").remove();

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

什么是<select>标签

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

语法

<select name = "select_list_name" size ="n" multiple>
<option value ="choice-name 1" selected> Text Label-1 </option>
<option value ="choice-name 2" selected> Text Label-2 </option>
..............................................................
..............................................................
</select>

标签指定后面的文本是一个列表， 标签用于确定列表的项目。

以下示例用于使用 JavaScript 从选择列表中删除选项。

示例1

<! DOCTYPE html>
<html>
<title>
Remove option from select list using JavaScript
</title>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<style>
h2 {
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: #aaa;
  align: center;
  font-size: 30px;
  margin-top: 1.5rem;
  font-weight: 1000;
}
p {
font-weight: bold;
  margin-bottom: 2.5rem;
  color: #aaa;
  align: center;
  font-size: 20px;
  margin-top: 1.5rem;
  font-weight: 1000;
}
h3 {
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: #aaa;
  align: center;
  font-size: 30px;
  margin-top: 1.5rem;
  font-weight: 1000;
}
body {
  background: #191828;
 color: #aaa;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin-top: 30;
   }
   ::placeholder { 
   color: #aaa;
   font-weight: bold;
  opacity: 1; 
}
input[type='button'] {
  box-sizing: border-box;
  height: 35px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
#selectNow {
 box-sizing: border-box;
  height: 35px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
#selectNow:hover {
    color: #FFFFFF;
    background-color: #aaa;
    font-weight: bold;
  opacity: 1; 
}
em {
  font-family: Georgia, serif;
  line-height: 1.6;
}
input[type='button']:hover {
    color: #FFFFFF;
    background-color: #3494e6;
}
</style>
   <body>
   <h3 align="center"> Example: </h3>          
               <h2 align="center"> Remove option from select JavaScript </h2>                                
                  <form id = "myForm" align = "center">
         <select id = "selectNow">
            <option value = "one"> One </option>
            <option value ="two" > Two </option>
           <option value ="three" > Three </option>
    <option value ="apple" > Apple </option>
    <option value ="pear" > Pear </option>
    <option value ="ban" > Banana </option>
    <option value="orange" > Orange </option>
         </select>
         <input type = "button" onclick = "remove()" value = "Click to Remove" >
      </form>
      <p align="center"> <em> Select and click the button to remove the selected option. </em> </p>
     <script>
         function remove() {
            var x = document.getElementById("selectNow");
            x.remove(x.selectedIndex);
         }
      </script>
     </body>
</html>

解释

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

以下JS代码用于从选择列表中删除元素。

<script>
         function remove() {
            var x = document.getElementById("selectNow");
            x.remove(x.selectedIndex);
         }
      </script>

输出：

下面是这个示例的输出：

移除JavaScript中的选择列表选项

示例2

<! DOCTYPE html>
<html>
<title>
Remove option from select list using JavaScript
</title>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<style>
#select1:hover {
color: #FFFFFF;
background-color: #aaa;
font-weight: bold;
 opacity: 1; 
}
button:hover {
color: #FFFFFF;
background-color: #3494e6;
}
 h2 {
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: #aaa;
  align: center;
  font-size: 30px;
  margin-top: 1.5rem;
  font-weight: 1000;
}
p {
font-weight: bold;
  margin-bottom: 2.5rem;
  color: #aaa;
  align: center;
  font-size: 20px;
  margin-top: 1.5rem;
  font-weight: 1000;
}
h3 {
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: #aaa;
  align: center;
  font-size: 30px;
  margin-top: 1.5rem;
  font-weight: 1000;
}
body {
  background: #191828;
 color: #aaa;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin-top: 30;
   }
   ::placeholder { 
   color: #aaa;
   font-weight: bold;
  opacity: 1; 
}
button {
  box-sizing: border-box;
  height: 35px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
#select1 {
 box-sizing: border-box;
  height: 35px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
em {
  font-family: Georgia, serif;
  line-height: 1.6;
}
</style>
</head> 
<body align="center"> 
<h1 style="color: green"> 
 <h3 align="center"> Example: </h3>            
      <h2 align="center"> Remove defined option from select JavaScript </h2>          
    <p align="center"> <em>
    Select any one option from the given options in select list.        <select id="select1"> 
            <option value="free"> 
            Free 
        </option> 
            <option value="basic"> 
            Basic 
        </option> 
            <option value="premium"> 
            Premium 
        </option> 
         <option value= "one"> One </option>
            <option value="two"> Two </option>
            <option value="three"> Three </option>      
</select> 
    </em> </p>
    <p align = "center"> <em> Click the button below to 
    Remove one option from the select box. </em> </p>
    <button onclick="removeOption()"> 
    Remove option 
</button> 
<script src= 
"https://code.jquery.com/jquery-3.3.1.min.js"> 
</script> 
<script type = "text/javascript"> 
function removeOption() { 
$("#select1 option[value='basic']").remove(); 
} 
    </script> 
</body> 
</html>

解释

在这个示例中，你可以选择或定义从选择列表中要移除的任何选项。当我们点击按钮时，选择列表中的指定元素将会被移除。

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

<script type="text/javascript"> 
        function removeOption() { 
            $("#select1 option[value='basic']").remove(); 
        } 
    </script>

输出：

以下是这个示例的输出：

移除JavaScript中的选择列表选项

在这个示例中，选择列表中的”basic”选项值是预先定义的要从列表中删除的。当我们点击按钮时，选择列表中的”basic”选项值将被移除。下面是从选择列表中移除”basic”选项值后的输出。

移除JavaScript中的选择列表选项

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程