無需刷新網頁即可加載 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.