背景
在前端开发中，我们经常需要使用选择框（Select）来获取用户输入。有时候，我们需要动态地增加或删除选择框中的选项（Option）。本文将介绍如何通过 JavaScript 实现从选择框中移除某个选项。
实现方法
我们可以通过以下两种方法来移除选择框中的选项：
方法一：使用 remove() 方法
选择框元素的 remove() 方法可以移除指定位置的 option 元素。我们先获取要移除的 option 元素，然后调用 remove() 方法即可。
const select = document.querySelector('select');
const optionToRemove = select.options[2]; // 要移除的 option 的位置
select.remove(optionToRemove);方法二：使用 removeChild() 方法
选择框元素的 removeChild() 方法也可以移除指定位置的 option 元素。不同的是，这个方法需要传入被移除元素的引用。
const select = document.querySelector('select');
const optionToRemove = select.options[2];
select.removeChild(optionToRemove);注意事项
在移除选项时，我们需要注意以下几点：
- 如果要移除多个选项，需要遍历所有要移除的选项并一个个移除。
- 移除后，选择框的 options.length 属性会自动减少。
- 如果被移除的选项当前被选中，选择框的 selectedIndex 属性将变为 -1，即没有任何选项被选中。
示例代码
以下是一个简单的示例，演示如何移除选择框中的选项：
-- -------------------- ---- ------- ------- -------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- --------- ------- --------------------------------------- -------- -------- -------------- - ----- ------ - ------------------------------------ ----- -------------- - ------------------ ------------------------------ - ---------
点击按钮后，选项三将被从选择框中移除。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8717