Refresh Webpageを使用せずにMySQLデータをロード

Question

MySQLデータベースからデータを取得するPHPスクリプトからjQueryを使用してJSONデータを取得することにより、別の値に基づいて選択ボックスを作成しようとしています。 これが私のテーブルです：

私は最初の選択から別の果物を選択した場合、それは第2の選択で利用可能な品種を変更します、期待しています。

私のスクリプトによると、私は2番目の選択肢に対応する利用可能な品種を得ることができません、私のスクリプトで何が間違っています。

<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

AJAX呼び出しの

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.