選擇第一個選擇標籤後，在第二個選擇標籤中給出子類別

Question

我是學習Ajax的新手，我使用PHP MYSQLI.I有2個選擇標籤，我希望如果第一個選擇是在第二個選擇標籤中給出所選的子類別選項。例如，如果選定的寶馬給予所有與寶馬有關的車型。我在這裏寫了代碼，但我不知道爲什麼它不起作用。 2 select labels這是我的代碼。

<script type="text/javascript"> 
function fetch_select(val) 
{ $(function() { 
$.ajax({ 
type: 'post', 
url: 'ajax.php', 
data: { 
    'get_option':val 
}, 
success: function (response) { 
$("#new_select").html(response); 
} 
}); 
}); 
} 

</script> 

這裏是主頁：

<div class="row"> 
    <div class="col-md-6"> 
     <select id="select_box" class="form-control" onchange="fetch_select(this.value);"> 
      <option disabled selected>1ci Kateqoriya</option> 
      <?php 
      $query = "SELECT * FROM categories WHERE parent_id IS NULL"; 
      $select_box = $db->select($query); 
      ?> 
      <?php while($row = $select_box->fetch_assoc()) : ?> 
      <option value="<?php echo $row['id']; ?>"><?php echo $row['name_az']; ?></option> 
      <?php endwhile; ?> 
     </select> 
    </div> 
    <div class="col-md-6"> 
     <select id="new_select" class="form-control" > 
      <option disabled selected>2ci Kateqoriya</option> 

     </select> 
    </div> 
</div> 

這裏是ajax.php：

<?php 

if(isset($_POST['get_option'])) 
{ 
$p_id = $_POST['get_option']; 
    $query = "SELECT * FROM categories WHERE parent_id ='$p_id'"; 
    $ch_cat = $db->select($query);  
while($row=$ch_cat->fetch_assoc()) 
{ 
    echo "<option>".$row['name_az']."</option>"; 
} 
exit; 
} 

?> 

Answer 1

我沒有測試的代碼，但我認爲這應該工作。而不是通過ajax只獲取選項，像這樣獲取整個選擇框。所以，你的ajax.php會 -

<?php 

if(isset($_POST['get_option'])) 
{ 
    $p_id = $_POST['get_option']; 
    $query = "SELECT * FROM categories WHERE parent_id ='$p_id'"; 
    $ch_cat = $db->select($query); 
    echo "<select id='new_select' class='form-control' onchange=\"fetch_select2(this.value);\" > \n"; 
    while($row=$ch_cat->fetch_assoc()) 
    { 
    echo "<option>".$row['name_az']."</option>"; 
    } 
    exit; 
    } 
    echo "</select>\n"; 

?> 

主頁：

<div class="row"> 
    <div class="col-md-4"> 
     <select id="select_box" class="form-control" onchange="fetch_select(this.value);"> 
      <option disabled selected>1ci Kateqoriya</option> 
      <?php 
      $query = "SELECT * FROM categories WHERE parent_id IS NULL"; 
      $select_box = $db->select($query); 
      ?> 
      <?php while($row = $select_box->fetch_assoc()) : ?> 
      <option value="<?php echo $row['id']; ?>"><?php echo $row['name_az']; ?></option> 
      <?php endwhile; ?> 
     </select> 
    </div> 
    <div class="col-md-4" id="slect2" onchange="fetch_select2(this.value);"> 
     <select id="new_select" class="form-control" > 
      <option disabled selected>2ci Kateqoriya</option> 

     </select> 
    </div> 
    <div class="col-md-4" id="slect3"> 
     <select id="new_select2" class="form-control" > 
      <option disabled selected>2ci Kateqoriya</option> 

     </select> 
    </div>   
</div> 

和腳本：

<script type="text/javascript"> 
    function fetch_select(val) 
    { $(function() { 
    $.ajax({ 
    type: 'post', 
    url: 'ajax.php', 
    data: { 
     'get_option':val 
    }, 
    success: function (response) { 
    $("#select2").html(response); 
    } 
    }); 
    }); 
    } 

    function fetch_select2(val) 
    { $(function() { 
    $.ajax({ 
    type: 'post', 
    url: 'ajax2.php', 
    data: { 
     'get_option':val 
    }, 
    success: function (response) { 
    $("#select3").html(response); 
    } 
    }); 
    }); 
    }   

</script>