Binding json string with drop-down using jquery

Question

I am new to jQuery. I am creating the json string in my servlet using gson-2.2.3.jar:

Gson gs = new Gson();
    String json = gs.toJson(names);
    System.out.println(json);
    PrintWriter out = resp.getWriter();
    out.println(json);
    out.close();

Below are the two commented codes I tried for binding the json string with drop-down but none of them works:

$.ajax({
         type:"POST",
         url: "DropDownController",
         success: function(result){
            alert(result);
            /* for (var id in result) {
                $("#drpDown").append('<option value="'+id+'">'+id+'</option>');
            } */
            /* $.each(result, function (index, value) {                 
                $("#drpDown").append('<option value="'+value.id+'">'+value.name+'</option>');
            }); */
         }
      });

The alert message box present in the success displays the json string in below format:

["Alabama","California","Alaska","Ohio"]

Kindly let me know how to bind the above json string data with the drop-down.

Darin Dimitrov · Accepted Answer · 2013-12-28 09:46:25Z

4

Try like this:

$.ajax({
    type: 'POST',
    url: 'DropDownController',
    dataType: 'json',
    success: function(result) {
        $.each(result, function() {
            $("#drpDown").append(
                $('<option/>', {
                    value: this,
                    html: this
                })
            );
        });
    }
});

answered Dec 28, 2013 at 9:46

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

3 Comments

user182944 Over a year ago

Thanks for the reply, its working great. Can you please explain whats going on inside the .each? I am new to jquery and hence willing to understand it line by line. Kindly elaborate.

Darin Dimitrov Over a year ago

For each iteration of the loop the .append() method will add its argument to the dropdown as child element. The $('<option/>', { value: this, html: this }) will create a new <option> element that will get appended and safely set its inner HTML and value attribute to this. Now this inside the $.each refers to the current element that's being iterated. Since you have an array of strings ["Alabama","California","Alaska","Ohio"], then it will refer to Alabama, California, ...

Kurkula Over a year ago

why not type: 'GET',

Sridhar R · Accepted Answer · 2013-12-28 09:46:42Z

2

Try this

var jso=["Alabama","California","Alaska","Ohio"]
for (var i in jso) {
  $("#test").append('<option value="'+jso[i]+'">'+jso[i]+'</option>');
}

DEMO

answered Dec 28, 2013 at 9:46

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

1 Comment

user182944 Over a year ago

Thanks for the reply, it works only if I have dataType: 'json' set inside the success block.

Collectives™ on Stack Overflow

Binding json string with drop-down using jquery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related