Создать взаимозависимый выпадающий список

Question

Я пытаюсь создать два взаимозависимых выпадающего меню. Есть 2 таблицы категории и подкатегории, их структура приводятся ниже

категории таблица

id catname 
1 A 
2 B 

Подкатегории таблица

id subcatname catid 
1 S   1 
2 T   1 
3 U   2 

В первом выпадающем списке у меня есть список категорий и во втором раскрывающемся меню У меня есть подкатегория список. Я хочу отобразить список подкатегорий на основе категории, выбранной в раскрывающемся меню категории.

код на странице index.php

<script> 
$(document).ready(function(){ 
    $('#cat').change(function(){ 

     var catid = $('#cat').val(); 
     if(catid != 0) 
     { 
     alert(catid); 
      $.ajax({ 
       type:'post', 
       url:'a_fetchsubcat.php', 
       data:{id:catid}, 
       cache:false, 
       success: function(returndata){ 
        $('#subcat').html(returndata); 
       } 
      }); 
     } 
    }) 
}) 
</script> 


<div class="form-group"> 
    <label class="control-label col-md-3">Category</label> 
    <div class="col-md-9"> 
     <select class="form-control" name="catid" id="cat"> 
      <option value="">Select a value</option> 
      <? 
      $sql="SELECT * FROM category"; 
      $result=mysqli_query($con,$sql); 
      if(mysqli_num_rows($result)>0) 
       { 
        while($row=mysqli_fetch_assoc($result)) 
         {?> 
          <option value="<? echo $row['id'];?>"><? echo $row['catname']; ?></option> 
         <?} 
       }?> 
     </select> 

    </div> 
</div> 

<div class="form-group"> 
    <label class="control-label col-md-3">Subcategory</label> 
    <div class="col-md-9"> 
     <select class="form-control" name="subcatid" id="subcat"> 
      <option></option> 
     </select> 
    </div> 
</div> 

Код на a_fetchsubcat.php является

<?php 
require 'connection.php'; 
$catid = $_REQUEST['id']; 

    $sql = "SELECT * FROM subcategory where catid='".$catid."'"; 
    $result = mysqli_query($con, $sql); 
    if (mysqli_num_rows($result) > 0) 
     { 
      while($row = mysqli_fetch_assoc($result)) 
       { 
        $subcatname=$row["subcatname"]; 
        $subcatid=$row["id"]; 
?> 
<option value="<? echo $subcatid;?>"><? echo $subcatname;?></option> 
        <?} 
      } 
     else 
      {?> 
       <option value="">No sub category </option> 
      <?}?> 

Моя проблема заключается в том, что я не в состоянии отобразить подкатегории после выбора категории из первого раскрывающегося списка список.

Answer 1

Ваш код, кажется, хорошо, убедитесь, что вы поместите ссылку Jquery перед кодом сценария

Answer 2

Вы видите успешный вызов ajax для a_fetchsubcat.php? Если это так, попробуйте изменить эту строку и проверьте, есть ли какая-либо ошибка в запросе.

$result = mysqli_query($con, $sql) or die(mysqli_error($con));