javascript - 在不刷新网页的情况下加载 MySQL 数据

Question

我尝试根据另一个选择框的值填充一个选择框，方法是使用 jQuery 从从 MySQL 数据库获取数据的 PHP 脚本中获取 JSON 数据。 这是我的 table :

我希望，如果我从第一次选择中选择了不同的水果，它会改变第二次选择中的可用品种。

根据我的脚本，我无法在第二个选择中获得相应的可用品种，我的脚本出了什么问题。

<form>
Fruit:
<select name="name" id="fruitName">
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
    <option>Pear</option>
</select>
Variety:
<select name="variety" id="fruitVariety">
</select>
</form>

<script>
function populate() {
    $.getJSON('varities.php', {fruitName:$('#fruitName').val()}, function(data) {
    var select = $('#fruitVariety');
    var options = select.attr('options');
    $('option', select).remove();
    $.each(data, function(index, array) {
        options[options.length] = new Option(array['variety']);
    });
});
}

$(document).ready(function() {
populate();
$('#fruitName').change(function() {
    populate();
});
});
</script>

这是我的 varities.php 脚本

$result = array();
$fruitName = $_GET['fruitName'];
$res=mysql_query("SELECT variety FROM fruit WHERE name = '$fruitName' ORDER BY variety");
while ($row=mysql_fetch_array($res)){ 
    array_push($result, array('variety'=>$row['variety']));
}
echo json_encode(array('result'=>$result));

有什么建议吗？

Answer 1

试试下面的函数

function populate() {
    $.getJSON('varities.php', {fruitName:$('#fruitName').val()}, function(data) {
    var select = $('#fruitVariety');
    var options = select.empty();//empty the select box
    $.each(data.result, function(index, array) {//don't forget you have a result array
        select.append('<option value="'+array.variety+'">'+array.variety+'</option>');//append the option elements
    });
});
}