删除具有特定值的选择选项

沃梦达教程前端问题

2022-01-01

Remove select option with specific value(删除具有特定值的选择选项)

本文介绍了删除具有特定值的选择选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何根据值0从<select>菜单中删除<option value="0">Value 0</option>？

<select id="someid">
  <option value="0">Value 0</option>
  <option value="1">Value 1</option>
</select>

推荐答案

执行此操作不需要原型JS。

按索引删除选项： 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var select = document.getElementById('someid')
select.removeChild(select.options[0])

<select id='someid'>
    <option value='0'>Value 0</option>
    <option value='1'>Value 1</option>
</select>

删除带有特定value的选项：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var select = document.getElementById('someid')
select.removeChild(getOptionByValue(select, '0'))

function getOptionByValue (select, value) {
    var options = select.options;
    for (var i = 0; i < options.length; i++) {
        if (options[i].value === value) {
            return options[i]  
        }
    }
    return null
}

<select id='someid'>
    <option value='0'>Value 0</option>
    <option value='1'>Value 1</option>
</select>

或，灵感来自this answer：

(编辑：RobG submitted this technique before me；此后所有功劳都归功于他。我看到他的评论批评我的回答，并开始相应地编辑我的帖子，但没有向下滚动到足够深，无法看到他的答案，他的答案已经解决了这个问题。)

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var select = document.getElementById('someid')
select.removeChild(select.querySelector('option[value="0"]'))

<select id='someid'>
    <option value='0'>Value 0</option>
    <option value='1'>Value 1</option>
</select>

这篇关于删除具有特定值的选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：删除具有特定值的选择选项

上一篇：当接口在NGXS状态下成功时，如何关闭MatDialogBox或任何div？

下一篇：使用Java脚本的Chain 2下拉列表

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX