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格式返回它們。