从选择框中删除特定值

Question

如何从下拉（选择）框中动态删除选项？需要检索该值，然后手动删除。

即

    [DROP DOWN BOX]
    Apples
    Oranges
    Pears
    Kiwis
    Mangos
    Strawberries

var option_to_delete =“Pears”

一些代码可以动态搜索“Pears”的选择框选项，如果检测到，则删除它。

预期结果：

    [DROP DOWN BOX]
        Apples
        Oranges
        Kiwis
        Mangos
        Strawberries

请不要使用jQuery库。

Answer 1

您可以遍历<select>中的子节点，并删除等于“Pears”的innerText或value的子节点。

我提供了一个jsfiddle：http://jsfiddle.net/pcb8q/

Answer 2

此代码将遍历下拉框，如果其中一个元素等于您的变量option_to_delete。

var dropdown = document.getElementById('ID_OF_DROPDOWN');
var option_to_delete = "Pears"

for (i=0;i<dropdown.length;  i++) {
   if (dropdown.options[i].value==option_to_delete) {
     dropdown.remove(i);
   }
}

我修改了https://stackoverflow.com/a/7601791/298051

中的一些代码

Answer 3

你可以像这样构建你的html

    <select id="fruits">
        <option value="apples">Apple</option>
        <option value="oranges">Oranges</option>
        <option value="kiwis">Kiwis</option>
    </select>

然后在JS

    var selectBox = document.getElementById('#fruits');
    var options = selectBox.getElementsByTagName('option');
    var optionToDelete = 'apples';

    for (var i = 0; i < options.length; i++) {
        if (options[i].value === optionToDelete) {
            selectBox.removeChild(options[i]);
        }
    }