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> 

Добавить эту АЯКС функцию:

<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 
}); 

Поскольку ни идентификатору указанный по умолчанию будет равен GET, а объект data будет преобразован в GET переменные, которые вы можете использовать для запроса БД, чтобы получить соответствующие подкатегории и вернуть их в JSON с соответствующими заголовками JSON.