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

I have the following in the page

我在页面中有以下内容

<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>

I would like to remove certain values from my select if certain conditions are true.

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

E.g

例如

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

How can I do this using javascript

我怎么能用javascript做到这一点

13 个解决方案

#1

Give an id for the select object like this:

为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>

You can do it in pure JavaScript:

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

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

But - as the other answers suggest - I'd strongly suggest to use jQuery or some other JS library.

但是 - 正如其他答案所暗示的那样 - 我强烈建议使用jQuery或其他一些JS库。

#2

Check the JQuery solution here

在这里查看JQuery解决方案

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

#3

with pure javascript

用纯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
        }
    }
}

not tested with IE (if someone can confirm it...)

未经IE测试（如果有人可以确认...）

#4

The index I will change as soon as it removes the 1st element. This code will remove values 52-140 from wifi channel combo box

索引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 
            }
        }
    }

#5

document.getElementById(this).innerHTML = '';

Put it inside your if-case. What it does is just to check for the current object within the document and replace it with nothing. You'll have too loop through the list first, I am guessing you are already doing that since you have that if.

把它放在你的if-case里面。它的作用是检查文档中的当前对象并将其替换为空。你将首先在列表中循环，我猜你已经这样做，因为你有那个if。

#6

If you are using JQuery, it goes as follows:

如果您使用的是JQuery，则如下所示：

Give an ID to your SELECT

为您的SELECT提供ID

<select name="val" size="1" id="val">
<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>

$("#val option[value='A'],#val option[value='C']").remove();

#7

if(frm.product.value=="F"){
    var select = document.getElementsByName('val')[0];
    select.remove(0);
    select.remove(1);
}

#8

You may use:

你可以使用：

if ( frm.product.value=="F" ){
    var $select_box = $('[name=val]');
    $select_box.find('[value=A],[value=C]').remove(); 
}

Update: If you modify your select box a bit to this

更新：如果您稍微修改选择框

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

the non-jQuery solution would be this

非jQuery解决方案就是这样

if ( frm.product.value=="F" ){
    var elem = document.getElementById('A');
    elem.parentNode.removeChild(elem);
    var elem = document.getElementById('C');
    elem.parentNode.removeChild(elem);
}

#9

This should do it

这应该做到这一点

document.getElementsByName("val")[0].remove(0);
document.getElementsByName("val")[0].remove(0);

Check the fiddle here

在这里查看小提琴

#10

You have to go to its parent and remove it from there in javascript.

您必须转到其父级并在javascript中从中删除它。

"Javascript won't let an element commit suicide, but it does permit infanticide"..:)

“Javascript不会让一个元素自杀，但它确实允许杀婴”.. :)

try this,

尝试这个，

 var element=document.getElementsByName(val))
 element.parentNode.removeChild(element.options[0]); // to remove first option

#11

Alternatively you can also accomplish this with getElementsByName

或者，您也可以使用getElementsByName完成此操作

<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>

So in matching on the option value of "C" we could remove Cars from the list.

因此，在匹配“C”的选项值时，我们可以从列表中删除汽车。

var selectobject = document.getElementsByName('val')[0];
for (var i=0; i<selectobject.length; i++){
if (selectobject.options[i].value == 'C' )
    selectobject.remove(i);
  }

#12

As some mentioned the length of the select element decreases when removing an option. If you just want to remove one option this is not an issue but if you intend to remove several options you could get into problems. Some suggested to decrease the index manually when removing an option. In my opinion manually decreasing an index inside a for loop is not a good idea. This is why I would suggest a slightly different for loop where we iterate through all options from behind.

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

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

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

If you want to remove all options you can do something like this.

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

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

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

#13

-1

Removing an option

删除选项

$("#val option[value='A']").remove();

#1