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

Question

如何删除 <option value="0">Value 0</option>来自 <select>基于值 0 的菜单？

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

Answer 1

您不需要 Prototype 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>

删除具有特定值的选项:

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 ；此后所有功劳都归功于他。我看到他的评论批评我的回答并开始相应地编辑我的帖子，但没有向下滚动到足以看到他的回答也已经解决了这个问题。)

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>