Remove values from select list based on condition

Question

I have the following in the page   lt select name  val  size  1   gt   lt option value  A  gt Apple lt  option gt   lt option value  C  gt Cars lt  option gt   lt option value  H  gt Honda lt  option gt   lt option value  F  gt Fiat lt  option gt   lt option value  I  gt Indigo lt  option gt                       lt  select gt     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

User · Answer

A simple working solution using vanilla JavaScript   const valuesToRemove     value1    value2     valuesToRemove forEach value   gt        const mySelect   document getElementById  my-select         const valueIndex   Array from mySelect options  findIndex option   gt  option value     value        if  valueIndex  gt  0            mySelect options remove valueIndex

User · Answer

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  gt   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  gt  0      selectElement remove 0

User · Answer

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  lt  l  i                          var channel   obj options i  value               if   channel  gt   52  amp  amp   channel  lt   140                                 obj remove i                   i--   after remove the length will decrease by 1

User · Answer

The best answer is this   x000D   x000D  function f1    x000D    var r document getElementById  ms    x000D    for i 0 i lt r length i    x000D      if r options i  selected  true  x000D        x000D        r remove i   x000D        i--  x000D        x000D    x000D   lt select id  ms  size  5  multiple  multiple  gt  x000D   lt option gt A lt  option gt  x000D   lt option gt B lt  option gt  x000D   lt option gt C lt  option gt  x000D   lt option gt D lt  option gt  x000D   lt option gt E lt  option gt  x000D   lt option gt F lt  option gt  x000D   lt  select gt  x000D   lt input type  button  value  btn1  id  b1  onclick  f1     gt  x000D   x000D   x000D    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

User · Answer

if frm product value   F        var select   document getElementsByName  val   0       select remove 0       select remove 1

User · Answer

This should do it  document getElementsByName  val   0  remove 0   document getElementsByName  val   0  remove 0     Check the fiddle here

User · Answer

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  quot select edit-salutation quot    for  let i   1  i lt optionsList length  i          if eligibleOptions indexOf optionsList options i  value      -1            cbxSal remove i           i--

User · Answer

Removing an option      val option value  A     remove

User · Answer

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

User · Answer

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  lt  length  i           select remove 0        or      select options 0    null

User · Answer

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

User · Answer

If you are using JQuery  it goes as follows   Give an ID to your SELECT   lt select name  val  size  1  id  val  gt   lt option value  A  gt Apple lt  option gt   lt option value  C  gt Cars lt  option gt   lt option value  H  gt Honda lt  option gt   lt option value  F  gt Fiat lt  option gt   lt option value  I  gt Indigo lt  option gt                       lt  select gt       val option value  A    val option value  C     remove

User · Answer

To remove options in a select by value I would do  in pure JS        document getElementById  val   options       filter o   gt  o value      A     o value      C        forEach o   gt  o remove

User · Answer

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

User · Answer

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   lt select name  val  size  1   gt     lt option id  A  value  A  gt Apple lt  option gt     lt option id  C  value  C  gt Cars lt  option gt     lt option id  H  value  H  gt Honda lt  option gt     lt option id  F  value  F  gt Fiat lt  option gt     lt option id  I  value  I  gt Indigo lt  option gt                       lt  select gt     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

User · Answer

Give an id for the select object like this    lt select id  mySelect  name  val  size  1   gt       lt option value  A  gt Apple lt  option gt       lt option value  C  gt Cars lt  option gt       lt option value  H  gt Honda lt  option gt       lt option value  F  gt Fiat lt  option gt       lt option value  I  gt Indigo lt  option gt                       lt  select gt     You can do it in pure JavaScript   var selectobject   document getElementById  mySelect    for  var i 0  i lt 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

User · Answer

Alternatively you can also accomplish this with getElementsByName         lt select id  mySelect  name  val  size  1   gt   lt option value  A  gt Apple lt  option gt   lt option value  C  gt Cars lt  option gt   lt option value  H  gt Honda lt  option gt   lt option value  F  gt Fiat lt  option gt   lt option value  I  gt Indigo lt  option gt                       lt  select gt     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 lt selectobject length  i     if  selectobject options i  value     C        selectobject remove i

User · Answer

Check the JQuery solution here      selectBox option value  option1     remove

[javascript] Remove values from select list based on condition

Examples related to javascript

Examples related to html

Examples related to validation