How to populate a dropdownlist with json data in jQuery?

Question

I am developing a country state cascading dropdown list... I returned JSON result based on countryId but I don't know how to populate/fill it in a new dropdown listbox...

Here is what I am using,

function getstate(countryId) {
    $.ajax({
        type: "POST",
        url: "Reg_Form.aspx/Getstates",
        data: "{'countryId':" + (countryId) + "}",
        contentType: "application/json; charset=utf-8",
        global: false,
        async: false,
        dataType: "json",
        success: function(jsonObj) {
            alert(jsonObj.d);
        }
    });
    return false;
}

And alert gave this,

{"Table" : [{"stateid" : "2","statename" : "Tamilnadu"},
            {"stateid" : "3","statename" : "Karnataka"},
            {"stateid" : "4","statename" : "Andaman and Nicobar"},
             {"stateid" : "5","statename" : "Andhra Pradesh"},
             {"stateid" : "6","statename" : "Arunachal Pradesh"}]}

And my aspx page has this,

<td>
<asp:DropDownList ID="DLCountry" runat="server" CssClass="dropDownListSkin" 
 onchange="return getstate(this.value);">
 </asp:DropDownList>
  </td>
 <td>
 <asp:DropDownList ID="DLState" runat="server" CssClass="dropDownListSkin">
   </asp:DropDownList>
 </td>

Any suggestion on how to fill DLState dropdown...

EDIT:

When I inspected through firebug I got the response for my AJAX post,

{"d":"{\"Table\" : [{\"stateid\" : \"2\",\"statename\" : \"Tamilnadu\"},{\"stateid\" : \"3\",\"statename\" : \"Karnataka\"},{\"stateid\" : \"4\",\"statename\" : \"Andaman and Nicobar\"},{\"stateid\" : \"5\",\"statename\" : \"Andhra Pradesh\"},{\"stateid\" : \"6\",\"statename\" : \"Arunachal Pradesh\"},{\"stateid\" : \"7\",\"statename\" : \"Assam\"},{\"stateid\" : \"8\",\"statename\" : \"Bihar\"},{\"stateid\" : \"9\",\"statename\" : \"Dadra and N. Haveli\"},{\"stateid\" : \"10\",\"statename\" : \"Daman and Diu\"},{\"stateid\" : \"11\",\"statename\" : \"Delhi\"},{\"stateid\" : \"12\",\"statename\" : \"Goa\"},{\"stateid\" : \"13\",\"statename\" : \"Gujarat\"},{\"stateid\" : \"14\",\"statename\" : \"Haryana\"},{\"stateid\" : \"15\",\"statename\" : \"Himachal Pradesh\"},{\"stateid\" : \"16\",\"statename\" : \"Jammu and Kashmir\"},{\"stateid\" : \"17\",\"statename\" : \"Kerala\"},{\"stateid\" : \"18\",\"statename\" : \"Laccadive Islands\"},{\"stateid\" : \"19\",\"statename\" : \"Madhya Pradesh\"},{\"stateid\" : \"20\",\"statename\" : \"Maharashtra\"},{\"stateid\" : \"21\",\"statename\" : \"Manipur\"},{\"stateid\" : \"22\",\"statename\" : \"Meghalaya\"},{\"stateid\" : \"23\",\"statename\" : \"Mizoram\"},{\"stateid\" : \"24\",\"statename\" : \"Nagaland\"},{\"stateid\" : \"25\",\"statename\" : \"Orissa\"},{\"stateid\" : \"26\",\"statename\" : \"Pondicherry\"},{\"stateid\" : \"27\",\"statename\" : \"Punjab\"},{\"stateid\" : \"28\",\"statename\" : \"Rajasthan\"},{\"stateid\" : \"29\",\"statename\" : \"Sikkim\"},{\"stateid\" : \"30\",\"statename\" : \"Tripura\"},{\"stateid\" : \"31\",\"statename\" : \"Uttar Pradesh\"},{\"stateid\" : \"32\",\"statename\" : \"West Bengal\"}]}"}

see my answer on this one for an example: http://stackoverflow.com/questions/2403441/jquery-ajax-pass-success-data-into-separate-function/2403573#2403573 — Mark Schultheiss, Apr 14 '10 at 13:58
Using the onchange event for a dropdownlist (or html select) hasn't worked for me in Firefox and Chrome. I used jQuerys change() instead (http://api.jquery.com/change/). — Daniel Lee, Apr 14 '10 at 14:20
@Daniel `$("#<%=DLState.ClientID%>").html(listItems);` this line seems to have error... Any suiggestion.. — ACP, Apr 14 '10 at 14:26
Take a look at this, hope this will help you http://stackoverflow.com/questions/5952284/jquery-fill-dropdown-with-json-data — Anand G, Apr 30 '13 at 12:53

Jon · Accepted Answer · 2010-04-14T14:09:24.747

50

var listItems= "";
var jsonData = jsonObj.d;
    for (var i = 0; i < jsonData.Table.length; i++){
      listItems+= "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>";
    }
    $("#<%=DLState.ClientID%>").html(listItems);

Example

   <html>
    <head></head>
    <body>
      <select id="DLState">
      </select>
    </body>
    </html>

    /*javascript*/
    var jsonList = {"Table" : [{"stateid" : "2","statename" : "Tamilnadu"},
                {"stateid" : "3","statename" : "Karnataka"},
                {"stateid" : "4","statename" : "Andaman and Nicobar"},
                 {"stateid" : "5","statename" : "Andhra Pradesh"},
                 {"stateid" : "6","statename" : "Arunachal Pradesh"}]}

    $(document).ready(function(){
      var listItems= "";
      for (var i = 0; i < jsonList.Table.length; i++){
        listItems+= "<option value='" + jsonList.Table[i].stateid + "'>" + jsonList.Table[i].statename + "</option>";
      }
      $("#DLState").html(listItems);
    });

edited Apr 14 '10 at 14:09

answered Apr 14 '10 at 13:35

Jon

5,956
10
39
40

@jon jsonObj.Table is undefined? Why i get this? – ACP Apr 14 '10 at 13:47
@Pandiya Chendur, I'm not sure, let me post a working example and maybe that will help. Try jsonObj.d.Table – Jon Apr 14 '10 at 13:48
@Pandiya Chendur, no problem. The example is up, you might want to try replacing jsonObj.Table with jsonObj.d.Table since that is what you are using to generate the jsonObject that is alerted in the code you posted. – Jon Apr 14 '10 at 13:53
@Pandiya Chendur, No problem, I will update my answer, also I re-posted the example link – Jon Apr 14 '10 at 13:55
@jon still i get the error `jsonObj.d.Table` is undefined... And some prob with your link i cant see a working example... – ACP Apr 14 '10 at 13:59
@Pandiya Chendur, I updated my answer again. I don't know if that will help or why the example link won't work. I'll just post my example code in my answer. – Jon Apr 14 '10 at 14:11
@jon see my edited question part... You ll get a fair idea how i receive the data.. – ACP Apr 14 '10 at 14:17
@jon i found the error `$("#<%=DLState.ClientID%>").html(listItems);` since i use asp.net masterpage my id will be different.. – ACP Apr 14 '10 at 14:22
Shouldn't you do a JSON.parse (or eval though not recommended) to get a Javascript object? e.g. var jsonData = JSON.parse(jsonObj.d); I use Douglas Crockfords JSON parser (http://www.json.org/json2.js) – Daniel Lee Apr 14 '10 at 14:26
@Pandiya Chendur, were you able to determine what was wrong with that line? – Jon Apr 14 '10 at 15:02

score 6 · Answer 2 · answered Sep 15 '12 at 11:54

//javascript
//teams.Table does not exist

function OnSuccessJSON(data, status) {
    var teams = eval('(' + data.d + ')');
    var listItems = "";
    for (var i = 0; i < teams.length; i++) {
      listItems += "<option value='" + teams[i][0]+ "'>" + teams[i][1] + "</option>";
    }
    $("#<%=ddlTeams.ClientID%>").html(listItems);
}

score 1 · Answer 3 · answered Jul 24 '12 at 07:42

1

To populate ComboBox with JSON, you can consider using the: jqwidgets combobox, too.

answered Jul 24 '12 at 07:42

turbob1234

51
1

hithin chandran · Answer 4 · 2015-08-06T16:02:25.660

try this one its worked for me

$(document).ready(function(e){
        $.ajax({
           url:"fetch",
           processData: false,
           dataType:"json",
           type: 'POST',
           cache: false,
           success: function (data, textStatus, jqXHR) {
                        
                         $.each(data.Table,function(i,tweet){
      $("#list").append('<option value="'+tweet.actor_id+'">'+tweet.first_name+'</option>');
   });}
        });
    });

How to populate a dropdownlist with json data in jQuery?

4 Answers4

Linked