Question

我已经为两个下拉框编写了代码。第一个下拉列表包含主要类别动态值的列表。当我选择主类别列表中的任何一个值时，第二个下拉列表应显示相应的子类别值。我怎样才能做到这一点？这是我的代码：

            <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" 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">
                                            <option value="" selected>Please Select</option>
                                            <option value="Birds">Sub Birds</option>
                                                <option value="Animals">Sub Animals</option>
                                            <option value="Notinlist">Category Not in list</option>
                                         </select>
                                </div>
                            </div>


                        </div>

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();
 while ($row = $sql->fetch(PDO::FETCH_ASSOC))
  {
  echo $row['album_sub_category'];

} ？＆GT;

Answer 1

除非列表中的项目预填充量足够小，否则您将不得不使用AJAX创建一个http端点来获取原始数据，然后使用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方式返回它们。

Answer 2

将您的代码更改为：

 <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
  }
?>

使用php更改动态下拉值

2 个答案: