JQuery: Populate HTML dropdown menu with JSON

Question

I know this questions been asked before, I've read other posts and couldn't get it to work.

I'm trying to populate a drop down menu with JSON data but I'm having some issues, the drop down appears on my html page but theres nothing in the drop down, not even the "Please Select". Below is my code, do you see any problems with it.

HTML

<select id="dropDown">
    </select>

JavaScript

$(document).ready(function () {
    $.ajax({
        url: 'http://localhost/api/Dynamic?database=',
        dataType: 'Json',
        success: function (results) {
            var $el = $("#dropDown");
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
        }
    });
});

JSON

["Item1","Item2","Item3","Item4"]

It's not an answer, but select2.github.io has a really easy implementation for this. — roberrrt-s
– roberrrt-s, Commented Oct 27, 2016 at 8:50
Yes the response is correct, I've used this exact AJAX call before, except now everything after "success" has changed. — Mark
– Mark, Commented Oct 27, 2016 at 8:57

Rajesh Patel · Accepted Answer · 2016-10-27 08:59:50Z

1

Have you included jquery in your html head tag
Please also check your ajax is returning json data
I have make a fiddle and its working fine for me

$(document).ready(function() {
 var $el = $("#dropDown");
var results = ["Item1","Item2","Item3","Item4"];
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
});

Here is working jsfiddle
https://jsfiddle.net/o5ju4kja/

answered Oct 27, 2016 at 8:59

Rajesh Patel

2,0461 gold badge17 silver badges22 bronze badges

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

6 Comments

Mark Over a year ago

I've commented out my code and copied in yours, and I still get the same result, an empty drop down. I've included the JS script in the head, It should work, but for some reason it isn't.

Rajesh Patel Over a year ago

@JacksonSentzke but you can check in js fiddle ..its working

Rajesh Patel Over a year ago

@JacksonSentzke check your console and let me know if you are getting any error

Mark Over a year ago

I know it's working in fiddle, but it's not working in my program.

Rajesh Patel Over a year ago

which browser you are using

|

Sergio Tx · Accepted Answer · 2016-10-27 08:59:53Z

0

var results = ["Item1","Item2","Item3","Item4"];

$(document).ready(function () {
            var $el = $("#dropDown");
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
    </select>

As you can see, the jquery code works. The problem must be in your ajax request not responding the desired json.

answered Oct 27, 2016 at 8:59

Sergio Tx

3,9381 gold badge20 silver badges29 bronze badges

7 Comments

Mark Over a year ago

I don't believe it is, I've copied in your code and tried it but I got the same result, an empty drop down.

Mark Over a year ago

I've just copied your code straight into my html between a script tag and it worked. So it must be something wrong with how I'm including my JS file

Mark Over a year ago

I have, Yes it runs on here, but it doesn't run in my program.

Sergio Tx Over a year ago

Try debugging then.

Mark Over a year ago

Does it have to be a post request?

|

Damian · Accepted Answer · 2016-10-27 09:00:45Z

0

The following code snippet is working fine so please verify the following points:

Verify that the request is working and you are receiving the correct answer.
Confirm that jQuery is added - probably it's missing
Verify that there is no error in console

var results = ["Item1","Item2","Item3","Item4"];

var $el = $("#dropDown");
$el.empty(); // remove old options
$el.append($("<option></option>")
   .attr("value", '').text('Please Select'));
$.each(results, function (index, value) {
$el.append($("<option></option>")
   .attr("value", value).text(value));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">

answered Oct 27, 2016 at 9:00

Damian

2,8682 gold badges31 silver badges30 bronze badges

Comments

P. Frank · Accepted Answer · 2016-10-27 09:09:09Z

Is it possible your JSON is not good encoding. Try to add a contentType format in your Ajax request:

$(document).ready(function () {
    $.ajax({
        url: 'http://localhost/api/Dynamic?database=',
        dataType: 'Json',
        contentType:"application/json; charset=ISO-8859-1",
        cache:false,
        success: function (results) {
            var $el = $("#dropDown");
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
        }
    });
});

Collectives™ on Stack Overflow

JQuery: Populate HTML dropdown menu with JSON

4 Answers 4

6 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related