Remove values from select list based on condition

Question

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

score 62 · Accepted Answer · edited Aug 16 '19 at 14:41

62

Give an id for the select object like this:

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

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 - it's a lot easier to use jQuery or some other JS library.

edited Aug 16 '19 at 14:41

shad0w_wa1k3r

12,955
8
67
90

answered Oct 17 '12 at 11:14

Andrew

899
8
9

12

The index I will change as soon as it removes the 1st element. check my code in answers. – Amit Shah Mar 28 '16 at 08:05
`for (var i=0; i – Chaminda Bandara Oct 30 '16 at 09:58
Would this interfere with the virtual DOM for Reactjs? I know jQuery can cause unexpected bugs because it manipulates the DOM directly, but I'm not really sure how document.getElementByID really works. – fungusanthrax Oct 19 '17 at 15:55
this only works if you want to remove a single option. – denov Nov 13 '20 at 20:19

Luca Rainone · Answer 2 · 2012-10-17T11:27:45.037

14

with pure 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...)

edited Oct 17 '12 at 11:27

answered Oct 17 '12 at 11:18

Luca Rainone

16,138
2
38
52

You don't need to call `theSelect.getElementsByTagName('OPTION')`, you can use `theSelect.options` instead. – Emaborsa Dec 05 '17 at 13:02

score 14 · Answer 3 · edited May 23 '17 at 12:18

14

Check the JQuery solution here

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

edited May 23 '17 at 12:18

Community

1
1

answered Apr 11 '14 at 07:44

Dumisani

2,988
1
29
40

score 7 · Answer 4 · answered Mar 28 '16 at 08:04

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

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

As you said, we should reduce the length by 1 after removing. — Babanna Duggani, Apr 14 '17 at 11:26

score 7 · Answer 5 · edited Apr 13 '18 at 14:07

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.

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);
}

Luc Wanlin · Answer 6 · 2020-10-18T13:18:06.327

6

To remove options in a select by value I would do (in pure JS) :

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

edited Oct 18 '20 at 13:18

answered Apr 07 '20 at 13:39

Luc Wanlin

97
2
5

To remove one option: `[...document.getElementById('val').options].filter(o => o.value === 'F')[0].remove();` – kiatng Dec 24 '20 at 02:26

score 4 · Answer 7 · answered Oct 17 '12 at 11:11

If you are using JQuery, it goes as follows:

Give an ID to your SELECT

<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();

score 3 · Answer 8 · answered Oct 17 '12 at 11:28

3

This should do it

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

Check the fiddle here

answered Oct 17 '12 at 11:28

Jacob George

2,559
1
16
28

this builds a hard dep on the ordering of the dom. at some point this will bite you in the ass. – denov Nov 13 '20 at 20:25

Thariama · Answer 9 · 2012-10-17T11:17:02.683

2

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

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

edited Oct 17 '12 at 11:17

answered Oct 17 '12 at 11:09

Thariama

50,002
13
138
166

jQuery is javascript, but this won't work if you do not have jQuery loaded – Thariama Oct 17 '12 at 11:11
there is a solution without the usage of jQuery, but using jQuery it is pretty simple – Thariama Oct 17 '12 at 11:13

score 2 · Answer 10 · answered Oct 17 '12 at 11:13

2

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

answered Oct 17 '12 at 11:13

karaxuna

26,752
13
82
117

bipen · Answer 11 · 2012-10-17T11:35:13.207

2

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

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

try this,

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

edited Oct 17 '12 at 11:35

answered Oct 17 '12 at 11:21

bipen

36,319
9
49
62

score 2 · Answer 12 · answered Sep 16 '16 at 19:35

Alternatively you can also accomplish this with 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.

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

score 2 · Answer 13 · answered May 04 '19 at 15:56

2

For clear all options en Important en FOR : remove(0) - Important: 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;
}

answered May 04 '19 at 15:56

Alexander Rogan

25
6

score 2 · Answer 14 · answered Oct 30 '19 at 14:06

The best answer is this

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()"/>

Because your visitor can also add custom options as he want and delete them without need any info about his options . This code is the most responsive delete code that you can write as your selected delete..

enjoy it:))))

score 1 · Answer 15 · answered Oct 17 '12 at 11:09

1

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.

answered Oct 17 '12 at 11:09

Ms01

4,420
9
48
80

Could kindly elaborate more on this? – Jacob Oct 17 '12 at 11:10
See my updated answer. Maybe it won't work, I think karaxuna's answer is better. – Ms01 Oct 17 '12 at 11:12

score 1 · Answer 16 · answered Feb 12 '20 at 16:01

A simple working solution using vanilla 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);
    }
});

score 1 · Answer 17 · answered May 04 '21 at 15:40

1

Other way

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

answered May 04 '21 at 15:40

German Gracia

351
4
8

score 0 · Answer 18 · answered Nov 05 '20 at 14:04

A few caveats not covered in most answers:

Check against multiple items (some should be deleted, some should remain)
Skip the first option (-Select-) on some option lists

A take on these:

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

score 0 · Answer 19 · answered Aug 21 '22 at 05:12

Use HTML5 Native API for Select. Fetch the options and pass the index in the remove function.

var s = document.getElementById("ctl00_ContentPlaceHolder1_ddlxml")
var options = s.options
for(var i=0; i<options.length; i++) {
    if(options[i].text==='UP3151005_180822FTO_1055352') s.remove(i);
    if(options[i].text==='UP3151005_180822FTO_1055371') s.remove(i);
    if(options[i].text==='UP3151005_180822FTO_1055560') s.remove(i);
    if(options[i].text==='UP3151005_180822FTO_1055617') s.remove(i);
}

score -1 · Answer 20 · answered Oct 17 '12 at 11:09

-1

Removing an option

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

answered Oct 17 '12 at 11:09

Udan

5,429
2
28
34

Remove values from select list based on condition

20 Answers20

Linked

Related