根据条件从选择列表中删除值

Question

我在页面中有以下内容

<select name="val" size="1" >
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select> 

如果某些条件为真,我想从我的选择中删除某些值.

例如

if(frm.product.value=="F"){
  // remove Apple and Cars from the select list
}

我怎么能用javascript做到这一点

Answer 1

为select对象提供一个id,如下所示:

<select id="mySelect" name="val" size="1" >
    <option value="A">Apple</option>
    <option value="C">Cars</option>
    <option value="H">Honda</option>
    <option value="F">Fiat</option>
    <option value="I">Indigo</option>                    
</select> 

你可以用纯JavaScript做到这一点:

var selectobject = document.getElementById("mySelect");
for (var i=0; i<selectobject.length; i++) {
    if (selectobject.options[i].value == 'A')
        selectobject.remove(i);
}

但是 - 正如其他答案所暗示的那样 - 使用jQuery或其他一些JS库要容易得多.

Answer 2

在这里查看JQuery解决方案

$("#selectBox option[value='option1']").remove();

Answer 3

用纯JavaScript

var condition = true; // your condition
if(condition) {
    var theSelect = document.getElementById('val');
    var options = theSelect.getElementsByTagName('OPTION');
    for(var i=0; i<options.length; i++) {
        if(options[i].innerHTML == 'Apple' || options[i].innerHTML == 'Cars') {
            theSelect.removeChild(options[i]);
            i--; // options have now less element, then decrease i
        }
    }
}

未经IE测试(如果有人可以确认...)

Answer 4

索引 I 将在删除第一个元素后立即更改。此代码将从 wifi 通道组合框中删除值 52-140

obj = document.getElementById("id");
if (obj)
{
        var l = obj.length;
        for (var i=0; i < l; i++)
        {
            var channel = obj.options[i].value;

            if ( channel >= 52 &&  channel <= 140 )
            {
                obj.remove(i);
                i--;//after remove the length will decrease by 1 
            }
        }
    }

Answer 5

要删除按值选择中的选项，我会这样做（在纯 JS 中）：

[...document.getElementById('val').options]
    .filter(o => o.value === 'A' || o.value === 'C')
    .forEach(o => o.remove());

Answer 6

正如一些人提到的，删除选项时选择元素的长度会减少。如果您只想删除一个选项，这不是问题，但如果您打算删除多个选项，则可能会遇到问题。有些人建议在删除选项时手动减少索引。在我看来，手动减少 for 循环内的索引不是一个好主意。这就是为什么我会建议一个稍微不同的 for 循环，我们从后面遍历所有选项。

var selectElement = document.getElementById("selectId");

for (var i = selectElement.length - 1; i >= 0; i--){
  if (someCondition) {
    selectElement.remove(i);
  }
}

如果你想删除所有选项，你可以做这样的事情。

var selectElement = document.getElementById("selectId");

while (selectElement.length > 0) {
  selectElement.remove(0);
}