JQuery populate select element using json data

Question

I am using this jquery to populate a select element with options:

$("#ticket_customer").change(function() {
                $.ajax({
                    url: "?getContactList=2&customer=" + $(this).val(),
                    async: true,
                    success: function(data) {
                        var sel = $("#ticket_contact");
                        sel.empty();
                        for (var i=0; i<data.length; i++) {
                          sel.append('<option value="' + data[i].sequence + '">' + data[i].forename + '</option>');
                        }

                        //$("#ticket_contact").html(data);
                        GetCustomerDetails();
                    }
                });
            });

the request to the URL is returning data in the following format:

[{"sequence":"465","forename":"first1","surname":"second1","email":"[email protected]"},{"sequence":"465","forename":"first2","surname":"second2","email":"[email protected]"}]

but its not populating the element

I think you forgot dataType : "json"

Mohamed-Yousef
– Mohamed-Yousef

2015-12-09 22:22:16 +00:00
Commented Dec 9, 2015 at 22:22 — Mohamed-Yousef
– Mohamed-Yousef, Commented Dec 9, 2015 at 22:22
Any errors in the Javascript console?

Barmar
– Barmar

2015-12-09 22:42:28 +00:00
Commented Dec 9, 2015 at 22:42 — Barmar
– Barmar, Commented Dec 9, 2015 at 22:42

Mayank · Accepted Answer · 2015-12-09 22:35:18Z

1

You have to add dataType to specify what format you are using:

$("#ticket_customer").change(function() {
                $.ajax({
                    url: "?getContactList=2&customer=" + $(this).val(),
                    async: true,
                    dataType : "json",
                    success: function(data) {
                        var sel = $("#ticket_contact");
                        sel.empty();
                        for (var i=0; i<data.length; i++) {
                          sel.append('<option value="' + data[i].sequence + '">' + data[i].forename + '</option>');
                        }

                        //$("#ticket_contact").html(data);
                        GetCustomerDetails();
                    }
                });
            });

answered Dec 9, 2015 at 22:35

Mayank

265 bronze badges

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

Collectives™ on Stack Overflow

JQuery populate select element using json data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related