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

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> 

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

E.g

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解决方案here

$("#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

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

为您的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();

Answer 5

索引我将在删除第一个元素后立即更改。 此代码将从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 6

有人提到，删除选项时，select元素的长度会减少。如果您只想删除一个选项，这不是问题，但如果您打算删除多个选项，则可能会遇到问题。 有人建议在删除选项时手动减少索引。在我看来，手动减少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);
}

Answer 7

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

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

Answer 8

您可以使用：

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

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

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

非jQuery解决方案就是这个

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

Answer 9

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

Answer 10

你必须转到它的父母并在javascript中从那里删除它。

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

试试这个，

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

Answer 11

这应该这样做

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

检查小提琴here

Answer 12

或者，您也可以使用 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> 

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

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

Answer 13

使用香草JavaScript的简单工作解决方案：

const valuesToRemove = ["value1", "value2"];

valuesToRemove.forEach(value => {
    const mySelect = document.getElementById("my-select");

    const valueIndex = Array.from(mySelect.options).findIndex(option => option.value === value);

    if (valueIndex > 0) {
        mySelect.options.remove(valueIndex);
    }
});

Answer 14

其他方式

document.querySelectorAll('#select option').forEach(i=>{
      if(frm.product.value == i.value){
         i.remove();
      }else {}
 })

Answer 15

大多数答案中未提及的一些警告：

• 检查多个项目（应删除一些，应保留一些）
• 跳过某些选项列表中的第一个选项（-Select-）

这些：

const eligibleOptions = ['800000002', '800000001'];
let optionsList = document.querySelector("select#edit-salutation");
for (let i = 1; i<optionsList.length; i++) {
    if(eligibleOptions.indexOf(optionsList.options[i].value) === -1) {
        cbxSal.remove(i);
        i--;
    }
}

Answer 16

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

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

Answer 17

最好的答案是这个

function f1(){
  var r=document.getElementById('ms');
  for(i=0;i<r.length;i++)
    if(r.options[i].selected==true)
    {
      r.remove(i);
      i--;
    }
}

<select id="ms" size="5" multiple="multiple">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
<input type="button" value="btn1" id="b1" onclick="f1()"/>

因为您的访客还可以根据需要添加自定义选项，并删除它们而无需任何有关其选项的信息。 该代码是响应速度最快的删除代码，您可以将其编写为所选的删除。

享受它：））））

Answer 18

清除所有选项 重要en：删除（0）-重要：0

var select = document.getElementById("element_select");
var length = select.length;
for (i = 0; i < length; i++) {
     select.remove(0);
 //  or
 //  select.options[0] = null;
} 

Answer 19

删除选项

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