How to change options of with jQuery? Asked Nov 26 '09 at 04:14 Active Jul 11 '23 at 17:27 Viewed 4.1e+01k times 319 0 Suppose a list of options is available, how do you update the <select> with new <option>s? jquery html-select edited Jan 16 '17 at 17:21 Kara 6,115 16 50 57 asked Nov 26 '09 at 04:14 Mask 33,129 48 101 125 10 Answers10 699 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 edited Jul 17 '16 at 15:42 Lucky Agarwal 3 3 answered Nov 26 '09 at 04:21 Christian C. Salvadó 807,428 183 922 838 4 How to remain the first option when empty()? – Mask Nov 26 '09 at 04:27 3 If using [bootstrap-select](https://silviomoreto.github.io/bootstrap-select/) then add the following to refresh the select picker after replacing the options: `$('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');`. Otherwise the new options will not be visible in your select list. – phn Nov 30 '16 at 14:42 How can I check one of this options? – Darós Jan 04 '18 at 11:21 I personally find this syntax a bit cleaner for creating jQuery node `$el.append($('', { value: value, text: key }));` – rorofromfrance Dec 07 '18 at 18:27 Thanks guys. if you have to set selected value when we are editing the page for the default selected value we can use something like this in the loop for specific iteration we can add selected $el.append($('', { value: value, selected: 'selected', text: key })); – Developer Mar 07 '19 at 11:54 This works fine. If your shown text is swapped with values, just interchange key and value. – Ajowi Jan 01 '22 at 11:16 85 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); answered May 20 '13 at 16:43 ktusznio 3,585 3 22 21 20 $('#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); edited Nov 26 '09 at 04:42 rahul answered Nov 26 '09 at 04:16 rahul 184,426 49 232 263 Do you want to clear the old ones o just add new options to the existing options? – rahul Nov 26 '09 at 04:27 6 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)); }); edited Jun 13 '16 at 17:28 Midas 7,012 5 34 52 answered Apr 28 '14 at 09:19 Draco 450 7 12 3 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. answered Feb 08 '16 at 13:41 Yuri Gor 1,353 12 26 3 Does this help? $("#SelectName option[value='theValueOfOption']")[0].selected = true; edited Dec 02 '17 at 05:16 Robert Columbia 6,313 15 32 40 answered Dec 02 '17 at 03:55 Vierzehn 31 4 3 This question is about dynamically adding to a , not selecting a specific option. – sisve Dec 02 '17 at 08:00

Answer 1

Old school of doing things by hand has always been good for me.

1. Clean the select and leave the first option:

       $('#your_select_id').find('option').remove()
       .end().append('<option value="0">Selec...</option>')
       .val('whatever');
   

2. If your data comes from a Json or whatever (just Concat the data):

       var JSONObject = JSON.parse(data);
       newOptionsSelect = '';
       for (var key in JSONObject) {
           if (JSONObject.hasOwnProperty(key)) {
               var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
           }
       }
   
       $('#your_select_id').append( newOptionsSelect );
   

3. My Json Objetc:

       [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]
   

This solution is ideal for working with Ajax, and answers in Json from a database.

Answer 2

If for example your html code contain this code:

<select id="selectId"><option>Test1</option><option>Test2</option></select>

In order to change the list of option inside your select, you can use this code bellow. when your name select named selectId.

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

in this example above i change the old list of option by only one new option.

Answer 3

if we update <select> constantly and we need to save previous value :

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');

Answer 4

Most approaches start by deleting all the existing options and re-populating the dropdown. However, I prefer to add and remove individual options to avoid altering the current selection, if any.

<option></option>
<option value="12151d81-fe94-4007-8f1f-907aa8129d0a" data-text="Scrambled Eggs">Scrambled Eggs</option>

This example assumes that the options HTML is structured like the above. options is JSON data like the following:

{
    "guid": "bf42ba25-02b3-4d49-b4cf-02467c4fc44d",
    "value": "Granola"
},
{
    "guid": "89004730-bb92-4cd6-986a-28e228a94d54",
    "value": "Yogurt"
}

field is the input object.

function update_options(field, options) {
                // If item doesn't exist in dropdown, add it.
                $.each(options, function (index, item) {
                    if (field.find(`option[value="${item.guid}"]`).length == 0) {
                        $(`<option value="${item.guid}" data-text="${item.value}">${item.value}<\/option>`).appendTo(field);
                    }
                });
                // If item in dropdown doesn't exist in data, remove it.
                $.each(field.find('option'), function (index, item) {
                    if (options.find(x => x.guid == item.value) == undefined) {
                        field.find(`option[value="${item.value}"]`).remove();
                    }
                });
            }