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.

<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

score 500 · Accepted Answer · edited Jan 06 '17 at 15:16

500

Remove an option:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option> 
</select>

Add an option:

$("#selectBox").append('<option value="option5">option5</option>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option> 
</select>

edited Jan 06 '17 at 15:16

TylerH

20,799
66
75
101

answered Dec 17 '08 at 18:41

dsimard

7,380
4
21
25

7

If you need to remove an option and select another: $('#selectBox').val('option2').find('option[value="option1"]').remove(); – Radu Maris Feb 08 '12 at 09:35
8

Honestly, I think the way select boxes are manipulated via javascript is one of the most confusing things ever, even when you have a reasonably good understanding of selectors and the DOM. – Tacroy Apr 10 '12 at 00:07

score 82 · Answer 2 · edited Jan 22 '16 at 06:54

82

You can delete the selected item with this:

$("#selectBox option:selected").remove();

This is useful if you have a list and not a dropdown.

edited Jan 22 '16 at 06:54

rrk

15,677
4
29
45

answered Apr 15 '11 at 13:28

Etienne Dupuis

13,548
6
47
58

It is removing everything for me... Wait I am using Select with multiple attribute. How I can remove it from multiple select ? – Akshay Nov 01 '18 at 13:08

score 28 · Answer 3 · edited May 07 '15 at 17:30

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.

@JBeckton: looking back at this written 4 years ago I laugh at myself and you are right :) — Adriana, Feb 07 '13 at 11:49

score 25 · Answer 4 · answered Jan 28 '12 at 20:56

To Remove an Item

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

To Add an item

$("#mySelect").append('<option value="option1">Option</option>');

To Check for an option

$('#yourSelect option[value=yourValue]').length > 0;

To remove a selected option

$('#mySelect :selected').remove();

score 20 · Answer 5 · edited Jan 19 '12 at 11:11

20

This should do it:

$('#selectBox').empty();

edited Jan 19 '12 at 11:11

DaveShaw

52,123
16
112
141

answered Jan 19 '12 at 11:09

qwe

201
2
2

score 18 · Answer 6 · edited Sep 21 '13 at 15:33

18

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

edited Sep 21 '13 at 15:33

Ry-

218,210
55
464
476

answered Dec 17 '08 at 18:56

Zoredache

37,543
7
45
61

5

-1 because this can be done w/o a plugin using jQuery and basic programming. – Slopeside Creative Sep 06 '13 at 20:16
ᕀ1 why reinvent the wheel – John Hascall Oct 31 '16 at 14:29

score 9 · Answer 7 · answered Mar 06 '14 at 01:24

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('<option value="' + dynamicVal + '">' + dynamicVal + '</option>');

Zachary Yates · Answer 8 · 2013-01-02T18:42:20.870

8

I found two pages that seem helpful, it's written for ASP.Net, but the same stuff should apply:

edited Jan 02 '13 at 18:42

answered Dec 17 '08 at 18:34

Zachary Yates

12,966
7
55
87

score 5 · Answer 9 · answered Jul 17 '12 at 14:40

5

Just to augment this for anyone looking, you are also able to just:

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

and

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

answered Jul 17 '12 at 14:40

AA11oAKas

809
1
11
23

I think this varies depends on browser. It might just disable that particular option. – Adam Ware Sep 30 '13 at 01:32
I don't recommend this method, as it is browser specific. – Scott Shaw-Smith Jun 23 '16 at 18:38
This is an old post but I would like to comment on this. Although this is a very nice way to deal with select option, it is not recommended because IE doesn't support it – Ahmed Ali Oct 18 '18 at 17:40

score 5 · Answer 10 · answered Mar 21 '12 at 06:28

5

The following links will be helpful-

http://api.jquery.com/remove/

http://api.jquery.com/append/

answered Mar 21 '12 at 06:28

Anjuman

1,424
15
10

score 4 · Answer 11 · answered Jun 05 '15 at 01:47

JavaScript

function removeOptionsByValue(selectBox, value)
{
  for (var i = selectBox.length - 1; i >= 0; --i) {
    if (selectBox[i].value == value) {
      selectBox.remove(i);
    }
  }
}

function addOption(selectBox, text, value, selected)
{
  selectBox.add(new Option(text, value || '', false, selected || false));
}

var selectBox = document.getElementById('selectBox');

removeOptionsByValue(selectBox, 'option3');
addOption(selectBox, 'option5', 'option5', true);

<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option> 
</select>

jQuery

jQuery(function($) {
  $.fn.extend({
    remove_options: function(value) {
      return this.each(function() {
        $('> option', this)
          .filter(function() {
            return this.value == value;
          })
          .remove();
      });
    },
    add_option: function(text, value, selected) {
      return this.each(function() {
        $(this).append(new Option(text, value || '', false, selected || false));
      });
    }
  });
});

jQuery(function($) {
  $('#selectBox')
    .remove_options('option3')
    .add_option('option5', 'option5', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option> 
</select>

score 2 · Answer 12 · edited Apr 27 '14 at 18:30

2

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

edited Apr 27 '14 at 18:30

nKn

13,691
9
45
62

answered Apr 27 '14 at 18:10

user3027485

21
2

Shafiqul Islam · Answer 13 · 2021-10-05T06:09:22.577

   

$("#selectBox option[value='option1']").remove();
$("#selectBox").append('<option value="option1">Option</option>');

 when you want to totally remove and add option from select box then you can use this code

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

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

sometime we need to hide and show option from select box , but not remove then you can use this code


<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

$('#selectBox :selected').remove();
$("#selectBox option:selected").remove();

sometime need to remove selected option from select box then

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

('#selectBox').empty();

when you need to remove all option then this code

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

$('#selectBox').find('option:first').remove();
$('#selectBox').find('option:last').remove();

when need to first option or last then this code

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

score 0 · Answer 14 · answered Oct 29 '14 at 10:15

0

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 = $('<option/>')
                  .val('option5')
                  .text('option5');

$('#selectBox').append(option);

This is a less error-prone solution when adding options' values and texts dynamically.

answered Oct 29 '14 at 10:15

polkduran

2,533
24
34

I am not the downvoter but it appears that you answered OP halfway with how to add an option, but not how to remove an option. – John Odom May 07 '15 at 16:48

score 0 · Answer 15 · answered Sep 14 '15 at 17:50

0

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

answered Sep 14 '15 at 17:50

daronwolff

1,994
21
18

2

Isn't the result equal to `$('#contenedor_modelos').empty();` ? Nice to see some action though :) – MineSweeper Jan 18 '16 at 15:55

score 0 · Answer 16 · answered Oct 24 '22 at 14:23

0

Perhaps someone else will need one elementary way to clear the select:

document.getElementById(SELECT_ID).innerHTML = "";

answered Oct 24 '22 at 14:23

Никитос

327
2
7

Removing an item from a select box

16 Answers16

JavaScript

jQuery

Linked

Related