JQuery create new select option

Question

I have the below functions in regular JavaScript creating select options. Is there a way I can do this with jQuery without having to use the form object? Perhaps storing the options as an array of JSON objects and parsing this in the calling function...

function populate(form)
{
form.options.length = 0;
form.options[0] = new Option("Select a city / town in Sweden","");
form.options[1] = new Option("Melbourne","Melbourne");
}

Below is how I call the function above:

populate(document.form.county); //county is the id of the dropdownlist to populate.

Possible duplicate, stackoverflow.com/q/740195/425313

Brad Koch
– Brad Koch

2013-04-24 03:28:22 +00:00
Commented Apr 24, 2013 at 3:28 — Brad Koch
– Brad Koch, Commented Apr 24, 2013 at 3:28

Harold1983- · Accepted Answer · 2010-05-04 17:49:06Z

71

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

answered May 4, 2010 at 17:49

Harold1983-

3,3692 gold badges25 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andrew.fox · Accepted Answer · 2012-10-30 11:12:24Z

53

What about

var option = $('<option/>');
option.attr({ 'value': 'myValue' }).text('myText');
$('#county').append(option);

edited Oct 30, 2012 at 11:12

andrew.fox

8,0696 gold badges56 silver badges83 bronze badges

answered May 4, 2010 at 17:44

Tejs

41.3k10 gold badges71 silver badges89 bronze badges

3 Comments

Mottie Over a year ago

With jQuery 1.4+, you could just do this: $('<option/>', { value : 'myValue' }).text('myText').appendTo('#country');

zedd45 Over a year ago

it's slightly more efficient to build up the list of options, then append them to the DOM, so you don't cause a reflow each time. see developers.google.com/speed/articles/reflow and stackoverflow.com/questions/510213/…

Keshav Over a year ago

Very elegant way! Good one.

CaffGeek · Accepted Answer · 2010-05-04 18:43:40Z

15

How about

$('#county').append(
    $('<option />')
        .text('Select a city / town in Sweden')
        .val(''),
    $('<option />')
        .text('Melbourne')
        .val('Melbourne')
);

edited May 4, 2010 at 18:43

answered May 4, 2010 at 17:52

CaffGeek

22.2k18 gold badges105 silver badges186 bronze badges

Comments

mdBender · Accepted Answer · 2015-01-03 11:24:37Z

If you need to make single element you can use this construction:

$('<option/>', {
    'class': this.dataID,
    'text': this.s_dataValue
}).appendTo('.subCategory');

But if you need to print many elements you can use this construction:

function printOptions(arr){
    jQuery.each(arr, function(){
        $('<option/>', {
            'value': this.dataID,
            'text': this.s_dataValue
        }).appendTo('.subCategory');
    });
}

Tony Norcross · Accepted Answer · 2019-02-06 16:05:27Z

6

A really simple way to do this...

// create the option
var opt = $("<option>").val("myvalue").text("my text");

//append option to the select element
$(#my-select).append(opt);

This could be done in lots of ways, even in a single line if really you want to.

answered Feb 6, 2019 at 16:05

Tony Norcross

731 silver badge4 bronze badges

Comments

Tim Down · Accepted Answer · 2012-08-06 19:33:56Z

This is confusing. When you say "form object", do you mean "<select> element"? If not, your code won't work, so I'll assume your form variable is in fact a reference to a <select> element. Why do you want to rewrite this code? What you have has worked in all scriptable browsers since around 1996, and won't stop working any time soon. Doing it with jQuery will immediately make your code slower, more error-prone and less compatible across browsers.

Here's a function that uses your current code as a starting point and populates a <select> element from an object:

<select id="mySelect"></select>

<script type="text/javascript>

function populateSelect(select, optionsData) {
    var options = select.options, o, selected;
    options.length = 0;
    for (var i = 0, len = optionsData.length; i < len; ++i) {
        o = optionsData[i];
        selected = !!o.selected;
        options[i] = new Option(o.text, o.value, selected, selected);
    }
}

var optionsData = [
    {
        text: "Select a city / town in Sweden",
        value: ""
    },
    {
        text: "Melbourne",
        value: "Melbourne",
        selected: true
    }
];

populateSelect(document.getElementById("mySelect"), optionsData);

</script>

Collectives™ on Stack Overflow

JQuery create new select option

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Linked

Related