Removing an item from a select box

Question

How do I remove items from  or add items to  a select box  I m running jQuery  should that make the task easier  Below is an example select box    lt select name  selectBox  id  selectBox  gt       lt option value  option1  gt option1 lt  option gt       lt option value  option2  gt option2 lt  option gt       lt option value  option3  gt option3 lt  option gt       lt option value  option4  gt option4 lt  option gt       lt  select gt

User · Answer

Adding Removing value dynamically without hard-code      remove value from select dynamically      id-select option value      dynamicVal         remove         Add dynamic value to select      id-select   append   lt option value      dynamicVal      gt     dynamicVal     lt  option gt

User · Answer

You can delete the selected item with this       selectBox option selected   remove      This is useful if you have a list and not a dropdown

User · Answer

this is select box html   lt select name  selectBox  id  selectBox  gt   lt option value  option1  gt option1 lt  option gt   lt option value  option2  gt option2 lt  option gt   lt option value  option3  gt option3 lt  option gt   lt option value  option4  gt option4 lt  option gt       lt  select gt    when you want to totally remove and add option from select box then you can use this code      selectBox option value  option1     remove        selectBox   append   lt option value  option1  gt Option lt  option gt       sometime we need to hide and show option from select box   but not remove then you can use this code       selectBox option value  option1     hide         selectBox option value  option1     show      sometime need to remove selected option from select box then      selectBox  selected   remove        selectBox option selected   remove      when you need to remove all option then this code     selectBox   empty      when need to first option or last then this code      selectBox   find  option first   remove        selectBox   find  option last   remove

User · Answer

Just to augment this for anyone looking  you are also able to just       selectBox option value  option1     hide      and      selectBox option value  option1     show

User · Answer

I found two pages that seem helpful  it s written for ASP Net  but the same stuff should apply    How to add remove items from a dropdown list using jQuery jQuery selector expressions

User · Answer

To Remove an Item     select mySelect option value  option1     remove       To Add an item      mySelect   append   lt option value  option1  gt Option lt  option gt       To Check for an option      yourSelect option value yourValue    length  gt  0    To remove a selected option      mySelect  selected   remove

User · Answer

I found two pages that seem helpful  it s written for ASP Net  but the same stuff should apply    How to add remove items from a dropdown list using jQuery jQuery selector expressions

User · Answer

I had to remove the first option from a select  with no ID  only a class  so I used this code successfully      select validation   find  option first   remove

User · Answer

I found two pages that seem helpful  it s written for ASP Net  but the same stuff should apply    How to add remove items from a dropdown list using jQuery jQuery selector expressions

User · Answer

If somebody need  delete ALL options inside a select  i did a litle function   I hope you find it useful  var removeAllOptionsSelect   function element class or id       var element     element class or id   option          each element function i v           value   v value            element class or id   option value   value      remove                Only have to run   removeAllOptionsSelect   contenedor modelos

User · Answer

window onload   function             var select   document getElementById  selectBox        var delButton   document getElementById  delete         function remove                 value   select selectedIndex          select removeChild select value               delButton onclick   remove          To add the item I would create second select box and   var select2   document getElementById  selectBox2    var addSelect   document getElementById  addSelect     function add         value1   select2 selectedIndex      select appendChild select2 value1           addSelect onclick   add    Not jQuery though

User · Answer

Remove an option    x000D   x000D      selectBox option value  option1     remove    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D    Add an option    x000D   x000D      selectBox   append   lt option value  option5  gt option5 lt  option gt     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

this is select box html   lt select name  selectBox  id  selectBox  gt   lt option value  option1  gt option1 lt  option gt   lt option value  option2  gt option2 lt  option gt   lt option value  option3  gt option3 lt  option gt   lt option value  option4  gt option4 lt  option gt       lt  select gt    when you want to totally remove and add option from select box then you can use this code      selectBox option value  option1     remove        selectBox   append   lt option value  option1  gt Option lt  option gt       sometime we need to hide and show option from select box   but not remove then you can use this code       selectBox option value  option1     hide         selectBox option value  option1     show      sometime need to remove selected option from select box then      selectBox  selected   remove        selectBox option selected   remove      when you need to remove all option then this code     selectBox   empty      when need to first option or last then this code      selectBox   find  option first   remove        selectBox   find  option last   remove

User · Answer

I just want to suggest another way to add an option  Instead of setting the value and text as a string one can also do   var option       lt option  gt                       val  option5                      text  option5         selectBox   append option     This is a less error-prone solution when adding options  values and texts dynamically

User · Answer

The following links will be helpful-  http   api jquery com remove   http   api jquery com append

User · Answer

Remove an option    x000D   x000D      selectBox option value  option1     remove    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D    Add an option    x000D   x000D      selectBox   append   lt option value  option5  gt option5 lt  option gt     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I just want to suggest another way to add an option  Instead of setting the value and text as a string one can also do   var option       lt option  gt                       val  option5                      text  option5         selectBox   append option     This is a less error-prone solution when adding options  values and texts dynamically

User · Answer

window onload   function             var select   document getElementById  selectBox        var delButton   document getElementById  delete         function remove                 value   select selectedIndex          select removeChild select value               delButton onclick   remove          To add the item I would create second select box and   var select2   document getElementById  selectBox2    var addSelect   document getElementById  addSelect     function add         value1   select2 selectedIndex      select appendChild select2 value1           addSelect onclick   add    Not jQuery though

User · Answer

To Remove an Item     select mySelect option value  option1     remove       To Add an item      mySelect   append   lt option value  option1  gt Option lt  option gt       To Check for an option      yourSelect option value yourValue    length  gt  0    To remove a selected option      mySelect  selected   remove

User · Answer

JavaScript   x000D   x000D  function removeOptionsByValue selectBox  value  x000D    x000D    for  var i   selectBox length - 1  i  gt   0  --i    x000D      if  selectBox i  value    value    x000D        selectBox remove i   x000D        x000D      x000D    x000D   x000D  function addOption selectBox  text  value  selected  x000D    x000D    selectBox add new Option text  value        false  selected    false    x000D    x000D   x000D  var selectBox   document getElementById  selectBox    x000D   x000D  removeOptionsByValue selectBox   option3    x000D  addOption selectBox   option5    option5   true   x000D   lt select name  selectBox  id  selectBox  gt  x000D       lt option value  option1  gt option1 lt  option gt  x000D       lt option value  option2  gt option2 lt  option gt  x000D       lt option value  option3  gt option3 lt  option gt  x000D       lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D    jQuery   x000D   x000D  jQuery function      x000D      fn extend   x000D      remove options  function value    x000D        return this each function     x000D              gt  option   this  x000D             filter function     x000D              return this value    value  x000D               x000D             remove    x000D            x000D         x000D      add option  function text  value  selected    x000D        return this each function     x000D            this  append new Option text  value        false  selected    false    x000D            x000D        x000D        x000D      x000D   x000D  jQuery function      x000D        selectBox   x000D       remove options  option3   x000D       add option  option5    option5   true   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D       lt option value  option1  gt option1 lt  option gt  x000D       lt option value  option2  gt option2 lt  option gt  x000D       lt option value  option3  gt option3 lt  option gt  x000D       lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I had to remove the first option from a select  with no ID  only a class  so I used this code successfully      select validation   find  option first   remove

User · Answer

window onload   function             var select   document getElementById  selectBox        var delButton   document getElementById  delete         function remove                 value   select selectedIndex          select removeChild select value               delButton onclick   remove          To add the item I would create second select box and   var select2   document getElementById  selectBox2    var addSelect   document getElementById  addSelect     function add         value1   select2 selectedIndex      select appendChild select2 value1           addSelect onclick   add    Not jQuery though

User · Answer

Remove an option    x000D   x000D      selectBox option value  option1     remove    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D    Add an option    x000D   x000D      selectBox   append   lt option value  option5  gt option5 lt  option gt     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Just to augment this for anyone looking  you are also able to just       selectBox option value  option1     hide      and      selectBox option value  option1     show

User · Answer

The following links will be helpful-  http   api jquery com remove   http   api jquery com append

User · Answer

If somebody need  delete ALL options inside a select  i did a litle function   I hope you find it useful  var removeAllOptionsSelect   function element class or id       var element     element class or id   option          each element function i v           value   v value            element class or id   option value   value      remove                Only have to run   removeAllOptionsSelect   contenedor modelos

User · Answer

window onload   function             var select   document getElementById  selectBox        var delButton   document getElementById  delete         function remove                 value   select selectedIndex          select removeChild select value               delButton onclick   remove          To add the item I would create second select box and   var select2   document getElementById  selectBox2    var addSelect   document getElementById  addSelect     function add         value1   select2 selectedIndex      select appendChild select2 value1           addSelect onclick   add    Not jQuery though

User · Answer

This should do it       selectBox   empty

User · Answer

You can delete the selected item with this       selectBox option selected   remove      This is useful if you have a list and not a dropdown

User · Answer

JavaScript   x000D   x000D  function removeOptionsByValue selectBox  value  x000D    x000D    for  var i   selectBox length - 1  i  gt   0  --i    x000D      if  selectBox i  value    value    x000D        selectBox remove i   x000D        x000D      x000D    x000D   x000D  function addOption selectBox  text  value  selected  x000D    x000D    selectBox add new Option text  value        false  selected    false    x000D    x000D   x000D  var selectBox   document getElementById  selectBox    x000D   x000D  removeOptionsByValue selectBox   option3    x000D  addOption selectBox   option5    option5   true   x000D   lt select name  selectBox  id  selectBox  gt  x000D       lt option value  option1  gt option1 lt  option gt  x000D       lt option value  option2  gt option2 lt  option gt  x000D       lt option value  option3  gt option3 lt  option gt  x000D       lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D    jQuery   x000D   x000D  jQuery function      x000D      fn extend   x000D      remove options  function value    x000D        return this each function     x000D              gt  option   this  x000D             filter function     x000D              return this value    value  x000D               x000D             remove    x000D            x000D         x000D      add option  function text  value  selected    x000D        return this each function     x000D            this  append new Option text  value        false  selected    false    x000D            x000D        x000D        x000D      x000D   x000D  jQuery function      x000D        selectBox   x000D       remove options  option3   x000D       add option  option5    option5   true   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D       lt option value  option1  gt option1 lt  option gt  x000D       lt option value  option2  gt option2 lt  option gt  x000D       lt option value  option3  gt option3 lt  option gt  x000D       lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I find the jQuery select box manipulation plugin useful for this type of thing   You can easily remove an item by index  value  or regex   removeOption index value regex array   selectedOnly    Remove an option by - index      myselect2   removeOption 0   - value      myselect   removeOption  Value    - regular expression      myselect   removeOption   val i   - array     myselect   removeOption   myselect 1    myselect 2       To remove all options  you can do     myselect   removeOption

User · Answer

Adding Removing value dynamically without hard-code      remove value from select dynamically      id-select option value      dynamicVal         remove         Add dynamic value to select      id-select   append   lt option value      dynamicVal      gt     dynamicVal     lt  option gt

User · Answer

This should do it       selectBox   empty

User · Answer

I find the jQuery select box manipulation plugin useful for this type of thing   You can easily remove an item by index  value  or regex   removeOption index value regex array   selectedOnly    Remove an option by - index      myselect2   removeOption 0   - value      myselect   removeOption  Value    - regular expression      myselect   removeOption   val i   - array     myselect   removeOption   myselect 1    myselect 2       To remove all options  you can do     myselect   removeOption

User · Answer

I find the jQuery select box manipulation plugin useful for this type of thing   You can easily remove an item by index  value  or regex   removeOption index value regex array   selectedOnly    Remove an option by - index      myselect2   removeOption 0   - value      myselect   removeOption  Value    - regular expression      myselect   removeOption   val i   - array     myselect   removeOption   myselect 1    myselect 2       To remove all options  you can do     myselect   removeOption

User · Answer

Remove an option    x000D   x000D      selectBox option value  option1     remove    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D    Add an option    x000D   x000D      selectBox   append   lt option value  option5  gt option5 lt  option gt     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  selectBox  id  selectBox  gt  x000D     lt option value  option1  gt option1 lt  option gt  x000D     lt option value  option2  gt option2 lt  option gt  x000D     lt option value  option3  gt option3 lt  option gt  x000D     lt option value  option4  gt option4 lt  option gt   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I find the jQuery select box manipulation plugin useful for this type of thing   You can easily remove an item by index  value  or regex   removeOption index value regex array   selectedOnly    Remove an option by - index      myselect2   removeOption 0   - value      myselect   removeOption  Value    - regular expression      myselect   removeOption   val i   - array     myselect   removeOption   myselect 1    myselect 2       To remove all options  you can do     myselect   removeOption

User · Answer

I found two pages that seem helpful  it s written for ASP Net  but the same stuff should apply    How to add remove items from a dropdown list using jQuery jQuery selector expressions

[javascript] Removing an item from a select box

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to html-select