javascript - 使用 JSON 数据动态填充下拉列表

Question

我在下拉菜单中显示高尔夫球场名称时遇到问题。我有一个 PHP 脚本，运行时会返回数据库中的类(class)名称。问题是，当我将其应用到 index.html 下拉页面并将其显示在浏览器中时，内容不显示下拉列表。

<?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);

?>

以上代码成功从数据库生成数据

$(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);
    });
});

上面的代码没有将类(class)名称填充到下拉菜单中。

我的下拉菜单的 ID 是 selectCourse。

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

感谢您提前提供的任何帮助。

Answer 1

您需要将文本放入选项中，如下所示:

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);

});

工作演示:jsFiddle