CODEWITHSUNDEEP
javascriptjqueryhtml-select
Darryl Hein
Darryl Hein

Reputation: 144917

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

What is the best method for adding options to a <select> from a JavaScript object using jQuery?

I'm looking for something that I don't need a plugin to do, but I would also be interested in the plugins that are out there.

This is what I did:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

A clean/simple solution:

This is a cleaned up and simplified version of matdumsa's:

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

Changes from matdumsa's: (1) removed the close tag for the option inside append() and (2) moved the properties/attributes into an map as the second parameter of append().

Upvotes: 1491

Views: 1150494

Answers (30)

kush
kush

Reputation: 645

 $.each(response, function (index,value) {
                        $('#unit')
                            .append($("<option></option>")
                                .attr("value", value.id)
                                .text(value.title));
                    });

Upvotes: 4

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92347

Pure JS

In pure JS adding next option to select is easier and more direct

mySelect.innerHTML+= `<option value="${key}">${value}</option>`;


let selectValues = { "1": "test 1", "2": "test 2" };

for(let key in selectValues) { 
  mySelect.innerHTML+= `<option value="${key}">${selectValues[key]}</option>`;
}
<select id="mySelect">
  <option value="0" selected="selected">test 0</option>
</select>

Upvotes: 1

matdumsa
matdumsa

Reputation: 16105

The same as other answers, in a jQuery fashion:

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

Upvotes: 1488

iEfimoff
iEfimoff

Reputation: 372

Getting the object keys to get the object values. Using map() to add new Options.

const selectValues = {
  "1": "test 1",
  "2": "test 2"
}
const selectTest = document.getElementById('selectTest')
Object.keys(selectValues).map(key => selectTest.add(new Option(selectValues[key], key)))
<select id="selectTest"></select>

Upvotes: 1

lkahtz
lkahtz

Reputation: 4796

A jQuery plugin could be found here: Auto-populating Select Boxes using jQuery & AJAX.

Upvotes: 7

H Sampat
H Sampat

Reputation: 1029

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}

It works well with jQuery 1.4.1.

For complete article for using dynamic lists with ASP.NET MVC & jQuery visit:

Dynamic Select Lists with MVC and jQuery

Upvotes: 12

mpapec
mpapec

Reputation: 50637

A refinement of older @joshperry's answer:

It seems that plain .append also works as expected,

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

or shorter,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

Upvotes: 25

joshperry
joshperry

Reputation: 42227

Most of the other answers use the each function to iterate over the selectValues. This requires that append be called into for each element and a reflow gets triggered when each is added individually.

Updating this answer to a more idiomatic functional method (using modern JS) can be formed to call append only once, with an array of option elements created using map and an Option element constructor.

Using an Option DOM element should reduce function call overhead as the option element doesn't need to be updated after creation and jQuery's parsing logic need not run.

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

This can be simplified further if you make a factory utility function that will new up an option object:

const newoption = (...args) => new Option(...args)

Then this can be provided directly to map:

$('mySelect').append($.map(selectValues, newoption))

Previous Formulation

Because append also allows passing values as a variable number of arguments, we can precreate the list of option elements map and append them as arguments in a single call by using apply.

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

It looks like that in later versions of jQuery, append also accepts an array argument and this can be simplified somewhat:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

Upvotes: 12

Nickolay
Nickolay

Reputation: 32063

If you don't have to support old IE versions, using the Option constructor is clearly the way to go, a readable and efficient solution:

$(new Option('myText', 'val')).appendTo('#mySelect');

It's equivalent in functionality to, but cleaner than:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

Upvotes: 41

ajevic
ajevic

Reputation: 2303

This is slightly faster and cleaner.

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

Upvotes: 216

SU3
SU3

Reputation: 5387

Since JQuery's append can take an array as an argument, I'm surprised nobody suggested making this a one-liner with map

$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

or reduce

['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));

Upvotes: 1

shohan
shohan

Reputation: 323

Actually, for getting the improved performance, it's better to make option list separately and append to select id. 

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

Upvotes: 2

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

I decided to chime in a bit.

  1. Deal with prior selected option; some browsers mess up when we append
  2. ONLY hit DOM once with the append
  3. Deal with multiple property while adding more options
  4. Show how to use an object
  5. Show how to map using an array of objects

// objects as value/desc
let selectValues = {
  "1": "test 1",
  "2": "test 2",
  "3": "test 3",
  "4": "test Four"
};
//use div here as using "select" mucks up the original selected value in "mySelect"
let opts = $("<div />");
let opt = {};
$.each(selectValues, function(value, desc) {
  opts.append($('<option />').prop("value", value).text(desc));
});
opts.find("option").appendTo('#mySelect');

// array of objects called "options" in an object
let selectValuesNew = {
  options: [{
      value: "1",
      description: "2test 1"
    },
    {
      value: "2",
      description: "2test 2",
      selected: true
    },
    {
      value: "3",
      description: "2test 3"
    },
    {
      value: "4",
      description: "2test Four"
    }
  ]
};

//use div here as using "select" mucks up the original selected value
let opts2 = $("<div />");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
  opts2.append($('<option />')
    .prop("value", val.value)
    .prop("selected", val.selected)
    .text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="" selected="selected">empty</option>
</select>

<select id="mySelectNew" multiple="multiple">
  <option value="" selected="selected">2empty</option>
</select>

Upvotes: 1

Carl H&#246;rberg
Carl H&#246;rberg

Reputation: 6005

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanilla JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

Upvotes: 114

Du-Lacoste
Du-Lacoste

Reputation: 12757

Set your HTML select id into following line below. In here mySelect is used as the id of the select element. 

   var options = $("#mySelect");

then get the object which is the selectValues in this scenario and sets it to the jquery for each loop. It will use the value and text of the objects accordingly and appends it into the option selections as follows. 

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

This will display text as the option list when drop down list is selected and once a text is selected value of the selected text will be used.

Eg.

"1": "test 1", "2": "test 2",

Dropdown,

display name: test 1 -> value is 1 display name: test 2 -> value is 2

Upvotes: 3

Satyendra Yadav
Satyendra Yadav

Reputation: 107

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

Upvotes: 3

Dr Fred
Dr Fred

Reputation: 989

Using the $.map() function, you can do this in a more elegant way:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

Upvotes: 4

M J
M J

Reputation: 2991

The JSON format:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

And the jQuery code to populate the values to the Dropdown on Ajax success:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

Upvotes: 5

Matt
Matt

Reputation: 1544

Rather than repeating the same code everywhere, I would suggest it is more desirable to write your own jQuery function like:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Then to add an option just do the following:

$('select').addOption('0', 'None');

Upvotes: 9

MD SHAHIDUL ISLAM
MD SHAHIDUL ISLAM

Reputation: 14523

  1. $.each is slower than a for loop
  2. Each time, a DOM selection is not the best practice in loop $("#mySelect").append();

So the best solution is the following

If JSON data resp is

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

use it as

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Upvotes: 8

Stuart.Sklinar
Stuart.Sklinar

Reputation: 3761

Although the previous answers are all valid answers - it might be advisable to append all these to a documentFragmnet first, then append that document fragment as an element after...

See John Resig's thoughts on the matter...

Something along the lines of:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

Upvotes: 7

LazyZebra
LazyZebra

Reputation: 1113

That's what I did with two-dimensional arrays: The first column is item i, add to innerHTML of the <option>. The second column is record_id i, add to the value of the <option>:

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
    $first_name = $item->first_name;
    $last_name = $item->last_name;
    $date = $item->date;
    $show = $first_name . " " . $last_name . ", " . $date;
    $request_id = $request->request_id;
    $items_arr[0][$i] = $show;
    $items_arr[1][$i] = $request_id;
    $i++;
}

echo json_encode($items_arr);

  2. JavaScript/Ajax

            function ddl_items() {
            if (window.XMLHttpRequest) {
                // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // Code for Internet Explorer 6 and Internet Explorer 5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var arr = JSON.parse(xmlhttp.responseText);
                var lstbx = document.getElementById('my_listbox');

                for (var i=0; i<arr.length; i++) {
                    var option = new Option(arr[0][i], arr[1][i]);
                    lstbx.options.add(option);
                }
            }
        };

        xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
        xmlhttp.send();
    }
}

Upvotes: 7

gpilotino
gpilotino

Reputation: 13302

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

In this way you "touch the DOM" only one time.

I'm not sure if the latest line can be converted into $('#mySelect').html(output.join('')) because I don't know jQuery internals (maybe it does some parsing in the html() method)

Upvotes: 296

Lokesh thakur
Lokesh thakur

Reputation: 206

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

Upvotes: 2

willard macay
willard macay

Reputation: 121

The simple way is:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

Upvotes: 12

Teej
Teej

Reputation: 12873

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

I've done a few tests and this, I believe, does the job the fastest. :P

Upvotes: 20

Jack Holt
Jack Holt

Reputation: 497

Be forwarned... I am using jQuery Mobile 1.0b2 with PhoneGap 1.0.0 on an Android 2.2 (Cyanogen 7.0.1) phone (T-Mobile G2) and could not get the .append() method to work at all. I had to use .html() like follows:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

Upvotes: 20

Animism
Animism

Reputation: 496

All of these answers seem unnecessarily complicated. All you need is:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

That is completely cross browser compatible.

Upvotes: 22

Erick Asto Oblitas
Erick Asto Oblitas

Reputation: 1409

I combine the two best answers into a great answer.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

Upvotes: 2

Christian Roman
Christian Roman

Reputation: 71

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

This manipulates the DOM only once after first building a giant string.

Upvotes: 7

Related Questions