使用JSON数据动态填充下拉菜单

我在下拉菜单中显示高尔夫球场名称时出现问题。我有一个PHP脚本，它在运行时返回数据库中的课程名称。问题是，当我将其应用到我的index.html下拉页面并将其显示在浏览器中时，内容不会显示下拉菜单。使用JSON数据动态填充下拉菜单

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

上面的代码未填充的过程名称到下拉菜单成功生成数据。

我的下拉菜单的id是selectCourse。

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

感谢您的任何帮助提前。

来源

2015-07-21 Aaron Crawley

请显示HTML以及 –

目前你没有设置选项的文本也，代替.append(options);使用

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

代替

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

来源

2015-07-21 09:15:55 Satpal

谢谢，这工作 –

使用.html(options);。

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

，你也应该指定标签之间的东西，像

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

来源

2015-07-21 09:18:44

正如你目前正在使用的jQuery，你可能想要去的这个解决方案：

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

来源

2015-07-21 09:22:24

你需要把文本如下所示：

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

来源

2015-07-21 09:39:08

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

来源

2015-07-21 10:08:42

使用JSON数据动态填充下拉菜单

回答

相关问题