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

2022-04-13 00:00:00 html-select javascript html

如何根据值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>

相关文章