使用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數據動態填充下拉菜單

回答

相關問題