list of states json data into dropdown select using jquery

Question

This is the json data that is being returned:

({"Data":{"Alabama":"AL","Alaska":"AK","Arizona":"AZ","Arkansas":"AR","California":"CA","Colorado":"CO","Connecticutt":"CT","Delaware":"DE","Florida":"FL","Georgia":"GA","Hawaii":"HI","Idaho":"ID","Illinois":"IL","Indiana":"IN","Iowa":"IA","Kansas":"KS","Kentucky":"KY","Louisiana":"LA","Maine":"ME","Massachusetts":"MA","Michigan":"MI"}})

I need to put it into dropdown select.

$.getJSON(url + 'GetStateList?jsoncallback=?',
    function (json) {
        if (!jQuery.isEmptyObject(json.Data)) {
            //need to write logic
        }
    });

Can anyone help me out on this?

related: http://stackoverflow.com/questions/94674/jquery-create-select-list-options-from-json-not-happening-as-advertised — JMax, Feb 17 '12 at 16:02
http://stackoverflow.com/questions/317095/how-do-i-add-options-to-a-dropdownlist-using-jquery — Fox32, Feb 17 '12 at 16:02

score 3 · Answer 1 · answered Feb 17 '12 at 16:02

3

var data = 'jsonstring', i, select = $('select');

for(i in data){

    select.append($('<option value="' + data[i][1] + '">' + data[i][0] + '</option>'));

}

answered Feb 17 '12 at 16:02

Alex

34,899
5
77
90

The result only returns the 1st letter of the state name and stateid – Krishh Feb 17 '12 at 16:43

score 2 · Accepted Answer · answered Feb 17 '12 at 16:11

It's just a basic example, feel free to use it as a start point:

<HTML>
<HEAD>
    <TITLE>Test Example</TITLE>
</HEAD>
<BODY>
    <form>
        <select id="sel" />

    <script>
    function fill() {
        var obj = ({"Data":{"Alabama":"AL","Alaska":"AK","Arizona":"AZ","Arkansas":"AR","California":"CA","Colorado":"CO","Connecticutt":"CT","Delaware":"DE","Florida":"FL","Georgia":"GA","Hawaii":"HI","Idaho":"ID","Illinois":"IL","Indiana":"IN","Iowa":"IA","Kansas":"KS","Kentucky":"KY","Louisiana":"LA","Maine":"ME","Massachusetts":"MA","Michigan":"MI"}});
        var s = document.getElementById('sel');
        var i = 0;
        for(var propertyName in obj.Data) {
        sel.options[i++] = new Option(propertyName, obj.Data[propertyName], true, false);
    }
    }

    fill();
    </script>
    </form>
</BODY>
</HTML>

list of states json data into dropdown select using jquery

2 Answers2