How to change options of <select> with jQuery?

ID : 10430

viewed : 10

Tags : jqueryhtml-selectjquery

Top 5 Answer for How to change options of <select> with jQuery?

vote vote

100

You can remove the existing options by using the empty method, and then add your new options:

var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").empty().append(option); 

If you have your new options in an object you can:

var newOptions = {"Option 1": "value1",   "Option 2": "value2",   "Option 3": "value3" };  var $el = $("#selectId"); $el.empty(); // remove old options $.each(newOptions, function(key,value) {   $el.append($("<option></option>")      .attr("value", value).text(key)); }); 

Edit: For removing the all the options but the first, you can use the :gt selector, to get all the option elements with index greater than zero and remove them:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first  
vote vote

90

I threw CMS's excellent answer into a quick jQuery extension:

(function($, window) {   $.fn.replaceOptions = function(options) {     var self, $option;      this.empty();     self = this;      $.each(options, function(index, option) {       $option = $("<option></option>")         .attr("value", option.value)         .text(option.text);       self.append($option);     });   }; })(jQuery, window); 

It expects an array of objects which contain "text" and "value" keys. So usage is as follows:

var options = [   {text: "one", value: 1},   {text: "two", value: 2} ];  $("#foo").replaceOptions(options); 
vote vote

78

$('#comboBx').append($("<option></option>").attr("value",key).text(value)); 

where comboBx is your combo box id.

or you can append options as string to the already existing innerHTML and then assign to the select innerHTML.

Edit

If you need to keep the first option and remove all other then you can use

var firstOption = $("#cmb1 option:first-child"); $("#cmb1").empty().append(firstOption); 
vote vote

63

For some odd reason this part

$el.empty(); // remove old options 

from CMS solution didn't work for me, so instead of that I've simply used this

el.html(' '); 

And it's works. So my working code now looks like that:

var newOptions = {     "Option 1":"option-1",     "Option 2":"option-2" };  var $el = $('.selectClass'); $el.html(' '); $.each(newOptions, function(key, value) {     $el.append($("<option></option>")     .attr("value", value).text(key)); }); 
vote vote

59

Removing and adding DOM element is slower than modification of existing one.

If your option sets have same length, you may do something like this:

$('#my-select option') .each(function(index) {     $(this).text('someNewText').val('someNewValue'); }); 

In case your new option set has different length, you may delete/add empty options you really need, using some technique described above.

Top 3 video Explaining How to change options of <select> with jQuery?

Related QUESTION?