on使用 PHP 更改动态下拉列表值

将代码更改为类似以下内容：

 <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
       <div class="form-group">
       Please Choose Your Category
       </div>
    </div>
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
       <select class="form-control" name="category_name" id="category_name" onchange="mainInfo(this.value);">
            <option value="" selected>Please Select</option>
            <option value="Birds">Birds</option>
            <option value="Animals">Animals</option>
            <option value="Notinlist">Category Not in list</option>
         </select>
     </div>
   </div>
 </div>
 <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
      <div class="form-group">
         Please Choose Your Sub Category
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
      <div class="form-group">
         <select class="form-control" name="album_name" id="album_name">
            <option value="">Please Select</option>
          </select>
       </div>
     </div>
   </div> 

添加这个 ajax 函数：

<script>
function mainInfo(str)
{
    var n;
    if (str=="0")
    {
        document.getElementById("album_name").innerHTML="<option>--Select --</option>";
        return;
    }
    if (window.XMLHttpRequest)
    {
        n=new XMLHttpRequest();
    }
    else
    {
        n=new ActiveXObject("Microsoft.XMLHTTP");
    }
    n.onreadystatechange=function()
    {
    if (n.readyState==4 && n.status==200)
    {
        document.getElementById("album_name").innerHTML=n.responseText;
    }
    }
    n.open("GET","sub_category.php&category_name="+str,true);
    n.send();
}
</script>

在 php 页面上，这是sub_category.php

<?php 
 $album_category = $_POST['category_name'];
 $sql=$conn->prepare("select * from `albums` where album_category=album_category");
 $sql->bindParam(":album_category",$album_category);
 $sql->execute();?>
<option value="">--Select State--</option>
<?php
 while ($row = $sql->fetch(PDO::FETCH_ASSOC))
  {
    ?>
    <option value="<?php echo $row['album_sub_category'];?>"><?php echo  $row['album_sub_category'];?></option>
   <?php
  }
?>

除非列表中的项目足够小，否则你必须创建一个 http 端点来使用 AJAX 获取原始数据，然后使用 JavaScript 在客户端上绘制它。 jQuery将使它变得轻巧。

另一种选择将涉及为每个更改重新加载页面...呸。。。

你的客户端代码可能是这样的jQuery：

$.ajax({url: '/categories.json', data: {cat:'category name'}}).done(function(cats){
    $.each(cats, function(){
        $('#Target').append($('<option>', {value:this}).text(this));
    })
}).fail(function(){
    // Handle error
});

由于未指定方法 id，因此它将默认为 GET，并且data对象将转换为GET变量，您可以使用这些变量供数据库查询获取适用的子类别，并以具有正确 JSON 标头的 JSON 格式返回它们。