Question

我在下拉菜单中显示高尔夫球场名称时遇到问题。我有一个PHP脚本，运行时返回我的数据库中的课程名称。问题是，当我将其应用于我的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);

＆GT？;

以上代码成功生成数据库中的数据

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

上面的代码没有将课程名称填充到下拉菜单中。

我的下拉菜单的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

Answer 2

目前您还没有设置选项文本，请使用

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

而不是

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

Answer 3

使用.html(options);代替.append(options);。

append()在标记后添加数据，但html()在标记之间插入数据。

你还应该在标签之间分配一些东西，比如

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

Answer 4

由于您目前正在使用jQuery，您可能需要寻求此解决方案：

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

Answer 5

首先记录您的数据，如console.log（数据），并检查浏览器firebug控制台是否输出json字符串或对象。如果是字符串，则需要使用JSON.parse（）将其转换为对象。

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

5 个答案: