CODEWITHSUNDEEP
javascriptphpjqueryhtmljson
Aaron Crawley
Aaron Crawley

Reputation: 7

Populate dropdown dynamically using JSON data

I am having problems displaying the names of golf courses in my dropdown menu. I have a PHP script that when ran, returns the names of the courses in my database. The problem is that when I apply this to my index.html dropdown page and display it in the browser, the content is not displaying the dropdown. 

<?php


    $db_host = 'localhost';
    $db_user = 'root';
    $db_pass = '';
    $db_name = '';

    $con = mysqli_connect($db_host,$db_user,$db_pass, $db_name);
    if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
    }   


    $sql = "SELECT name FROM courses";

    $result = mysqli_query($con, $sql) or die("Error: ".mysqli_error($con));;

    $courses = array();

    while ($row = mysqli_fetch_array($result))
    {
        array_push($courses, $row["name"]);
    }

    echo json_encode($courses);

?>

The above code successfully generates the data from the database 

$(document).ready(function () {
    $.getJSON("getCourseDD.php", success = function(data){
        var options = "";
        for(var i=0; i< data.length; i++){
            options += '<option value ="' + data[i] + '">' + '</option>';
        }
        $("#selectCourse").append(options);
    });
});

The above code is not populating the course names into the dropdown menu.

The id of my dropdown menu is selectCourse.

<form> <select id="selectCourse" </select> </form>

Thanks for any help in advance.

Upvotes: 0

Views: 4824

Answers (5)

Tuhin Biswas
Tuhin Biswas

Reputation: 37

First log your data like console.log(data) and check in browser firebug console whether it outputs json string or object. If it's string you need to convert it into object using JSON.parse().

Upvotes: 0

Ashwin Aggarwal
Ashwin Aggarwal

Reputation: 657

You need to put text in options as below :

var dummyData = ['English','Spanish','French','Mandarin'];

$(document).ready(function () {
    var data = dummyData, //This data comes from the ajax callback
        courseOptions = "";

    for(var i=0; i< data.length; i++){
       courseOptions += '<option value ="' + data[i] + '">'+data[i]+'</option>';
    }

   $("#selectCourse").append(courseOptions);

});

Working Demo : jsFiddle

Upvotes: 1

Aniket Singh
Aniket Singh

Reputation: 2634

Use .html(options); in place of .append(options); .

append() add data after tag but html() insert data between tag.

and you should also assign something between tag, like

options += '<option value ="' + data[i] + '">' +  data[i]  + '</option>'

Upvotes: 0

TaoPR
TaoPR

Reputation: 6052

As you're currently utilizing jQuery, you may want to go for this solution:

for(var i=0; i< data.length; i++)
{
    $("#selectCourse").append(
        $('<option>').text(data[i]).val(data[i])
    );
}

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Currently you are not setting text of option also, use

options += '<option value ="' + data[i] + '">' +  data[i]  + '</option>'

instead of 

options += '<option value ="' + data[i] + '">' + '</option>';

Upvotes: 0

Related Questions