ajaxを使用して入力フィールドをドラッグダウンして値を取得する方法

Question

3つのドロップダウン入力フィールドがあり、そのオプションを他の入力フィールドの値に応じて変更したいと考えています。私は最初の入力フィールドの値を取得し、別の入力フィールドに関連するデータを取得するためにPHPクエリを送信したい。

2つの入力フィールドがあるとします。私は最初の入力フィールドの値を取得し、PHPのクエリを介して2番目の入力フィールドの値を取得するためにデータベースに送信したい。 今、私はアラートでデータを取得していますが、値を2番目のドロップダウンに入れる方法はわかりません。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#first-dropdown").off("change").on("change", function() { 
      $.ajax({ 
       'url':"getUrl.php", 
       'data':{id:$("#first-dropdown").val()}, 
       'method':'GET', 
       'success':function(data) { 
        alert(data); 
       } 
      }) 
     }) 
    }); 
</script> 

<select id="first-dropdown"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3s">3</option> 
    <option value="4">4</option> 
</select> 
<select id="second-dropdown"> 

</select> 

と私gerUrl.phpは次のとおりです。

<?php 
$id = $_GET['id']; 
$query = mysql_query("select category_name from product_categories where Line_Code='$id'"); 
while ($data = mysql_fetch_assoc($query)) { 
    $values[] = array(
     'product_categories'=>$data['category_name'], 
    ); 
} 
echo json_encode($values); 
?> 

私は警告してデータを取得していますが、私は第2ドラグダウンオプションで表示したいです。

Answer 1

<?php 
$id = $_GET['id']; 
$html =''; 
    $query = mysql_query("select category_name from product_categories where Line_Code='$id'"); 
while($data = mysql_fetch_assoc($query)) 
    { 
    $html .='<option>'.$data['category_name'].'</option>'; 

} 
echo $html; 
?> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#first-dropdown").off("change").on("change", function(){ 
     $.ajax({ 
      'url':"getUrl.php", 
      'data':{id:$("#first-dropdown").val()}, 
      'method':'GET', 
      'success':function(data){ 
       $('#second-dropdown').append(data); 

      } 


      }) 
     }) 

    });