无需刷新网页即可加载 MySQL 数据

Question

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

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

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

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

Answer 2

Make 2 separate tables,one for the fruits and another for the variety. Id of tbl_fruits will be a foreign key in tbl_variety.

1)First get all fruits and store the results in $fruits.

Therefore, first select will be like:

<select name="name" id="fruitName">
    <?php foreach($fruits as $fruit): ?>
          <option value="<?=$fruit['id']?>"><?=$fruit['name']?></option>;
     <?php endforeach; ?>
</select>

Then you can populate the 2nd dropdown using ajax:

<select name="variety" id="fruitVariety">
</select>


<script>
var id=$('#fruitName').val();
            $.ajax({  // first call will get the list as per the initial value of the fruit list when the page loads
                url:"get_variety.php",  
                method:"POST",  
                data:{initial:id},  
                dataType:"html",  
                success:function(data)              
                {  

                     $('#fruitVariety').html(data);  
                }  
           });


        $('#category').change(function(){  
           var id = $(this).val();


           $.ajax({  // this will be triggered whenever you select a different value from the fruits list
                url:"get-variety.php",  
                method:"POST",  
                data:{id:id},  
                dataType:"html",  
                success:function(data)              
                {  
                     $('#fruitVariety').html(data);  
                }  
           });
</script>

And in get-variety.php:

Check if $_POST['initial'] or $_POST['id'] is set and fire query accordingly:
$initial=$_POST['initial'];

$results= After executing('SELECT * FROM tbl_variety WHERE fruit_id="'.$initial.'"');

foreach ($results as $result) {
     echo '<option value="' . $result["id"] . '">'.$result["variety"].'</option>';
    }

Similary, run the query for the other POST variable.