How to Add Options to a Select from a JavaScript Object With Jquery

What is the best way to add options to a select from a JavaScript object with jQuery?

The same as other answers, in a jQuery fashion:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

Adding options to a select using jQuery?

This did NOT work in IE8 (yet did in FF):

$("#selectList").append(new Option("option text", "value"));

This DID work:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Create select DOM object with options in jQuery, Passing Attributes

When creating an element with jQuery, any attribute, or even jQuery method, can be used in the options object, so you can do

$('<select />', {

  name   : 'test',

  on     : {

      change : function() { /* stuff */ }

  },

  append : [

      $('<option />', {value : "1", text : "Opt 1"}),

      $('<option />', {value : "2", text : "Opt 2"}),

      $('<option />', {value : "3", text : "Opt 3"})

  ]

}).appendTo('#app');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>

JQuery create new select option

Something like:

function populate(selector) {
  $(selector)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

populate('#myform .myselect');

Or even:

$.fn.populate = function() {
  $(this)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

$('#myform .myselect').populate();

What is the best way to add options to a select from a JavaScript object with jQuery?

The same as other answers, in a jQuery fashion:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

Populate select drop-down using object (JavaScript or jQuery)

Just use w (e.g. 'Issues') to add a <optgroup> element and use that label to add the options to the correct group.

var test = [{

"Issue": ["A producers", "A producers", "H producers", "I producers", "Limited resource producers", "Organic producers", "Producers MM", "Producers MM"],

"Activity Type": ["Career Fairs", "Career Fairs", "Outreach", "Targeted States Programs", "Partnership Programs", "Education", "Career Fairs", "Targeted States Programs"],

"Minority Serving Institute": ["A", "DD", "B", "HSI","DD", "A", "HSI", "B"],

"Leading Office": ["DAIS", "RMED", "RMSD", "RMSD", "DAIS", "RMSD", "RMED", "RMED"],

"Location": ["AAAAA", "TEST", "DFDFFF", "MIAMI", "45tw45t ", "EEEEEEE", "NEW ORLEANS", "RTRTRTR"],

"State": ["Alaska", "Alaska", "Arizona", "Florida", "Alaska", "Kentucky", "Louisiana", "Iowa"]

}];

for (var key in test) {

  var obj = test[key];

  for (var w in obj) {

    var obj2 = obj[w];

    $('.filter').append($("<optgroup />").attr({'label': w}));

    for (var z in [...new Set(obj2)]) {

      var obj3 = obj2[z];

      $('.filter optgroup[label="'+w+'"]').append($("<option />").val(obj3).text(obj3));

    }

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="filter"></select>

jQuery:Trying to append the options to select tag

EDIT Based on Chat

Since you're dynamically forming the select, you must trigger the chosen plugin.

 $('#graph_name').trigger("chosen:updated");

Add it after appending the options. It will work

DEMO

You're trying to append the string directly. But you must append the DOM element.

  var option = '<option value="'+value.id+'">'+value.text+'</option>';
  $('#graph_name').append(option);

It must be

  var option = $('<option value="'+value.id+'">'+value.text+'</option>');
  $('#graph_name').append(option);

Even better, instead of appending to the DOM tree on every iteration. Load it an array and then set the html() in the select. It will improve the performance.

Is there a way to attach a Javascript object to a Select Option

Use jQuery's .data() function instead.

Updated example: http://jsbin.com/afolo3/2

---

Related Topics