onchange使用php动态下拉值

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']; 

} >

Answer 1

你的代码更改为类似的东西：

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

Answer 2

取子类别除非在列表中的项目足够小，预紧力加载到页面，你将不得不建立一个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格式返回它们。