how to populate data of javascript object values in option of html select using jquery/javascript

Question

javascript object named countries. Now this data i want to populate in HTML select

var countries = {
    India:"delhi",
    US:"Norway",
    UK:"London",
    id: 123752,
    allcountries : function(){return this.India +" "+ this.US + " " + this.UK + " "+this.id}
};

HTML Code

<select id="con">
    <option></option>
</select>

I tried

document.getElementById("con").innerHTML = countries.allcountries();

$('#con option').append(countries.India);

but it is not working can anyone help me to populate data using jquery/javascript in html select.

what is your expected output? because if this is your js object then you have to create new object and push the country's name and values in it, then you can loopin to populate. — Jai
– Jai, Commented Jul 3, 2014 at 7:00
all are voted up for best answers for jquery as well as javascript. — Paresh3489227
– Paresh3489227, Commented Jul 3, 2014 at 8:37

Rajaprabhu Aravindasamy · Accepted Answer · 2014-07-03 06:42:49Z

2

Try,

var countries = {
    India: "delhi",
    US: "Norway",
    UK: "London"
};

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

DEMO

answered Jul 3, 2014 at 6:42

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

Comments

Mritunjay · Accepted Answer · 2014-07-03 06:53:33Z

1

This worked for me.

HTML:-

<select id="con">
    <option></option>
</select>

Javascript:-

var countries = {
India:"delhi",
US:"Norway",
UK:"London",
id: 123752
};

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

It will add capitals of Countries as values of options.

answered Jul 3, 2014 at 6:53

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

michikot · Accepted Answer · 2014-07-03 06:54:41Z

1

In native javascript, you may try the code below:

<script>
var countries = {
    India:"delhi",
    US:"Norway",
    UK:"London"
};
window.onload=function(){
    console.log(countries);

    var select = document.getElementById("con");
    var option;

    for (var key in countries) {
        option = document.createElement("option");
        option.value = key;
        option.textContent = countries[key];
        select.appendChild(option);
    }
};
</script>

<select id="con">
    <option></option>
</select>

answered Jul 3, 2014 at 6:54

michikot

1425 bronze badges

Comments

Jai · Accepted Answer · 2014-07-03 07:20:40Z

What my suggestion is to have a blank <select> like this:

<select id="con"></select>

and update your function like this:

var countries = {
    India: "delhi",
    US: "Norway",
    UK: "London",
    id: 123752,
    allcountries: function () {
        return this.India + " " + this.US + " " + this.UK + " " + this.id
    },
    conToPopulate: function () { // make a new func to return an object
        var o = {}; // create an object
        o['India'] = this.India; // push the required keys and values
        o['US'] = this.US;
        o['UK'] = this.UK;
        return o; // now outputs : {India: "delhi", US: "Norway", UK: "London"}
    }
};
$(function () {
    $.each(countries.conToPopulate(), function (key, value) {
        $('#con').append($('<option/>', {
            value: value,
            text: key
        }));
    });
});

Collectives™ on Stack Overflow

how to populate data of javascript object values in option of html select using jquery/javascript

4 Answers 4

DEMO

Comments

Comments

Comments

Demo fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related