从数据库中选择第三级

Question

我试图从第三级选择框中选择数据，即当我从第一个选择框中选择任何选项然后出现第二个选择框时，它具有与第一个选择框中所选选项相关的选项，直到现在，一切正常。现在我想尝试更多一级，即当我从第二个选择框中选择选项时，将出现第三个选择框，它包含与第二个选择框相关的选项。第二和第三选择框中的所有数据都来自数据库。

这是我的代码： -

     <select id="options" class="form-control">
        <option>--</option>                                         
        <option value="1">Real Estate</option>
        <option value="2">Automobiles</option>
    </select><br> 

    <select id="content-1" class="content hidden form-control" >
        <?php                
        $result = "SELECT * FROM sub_categories where categories_name ='Real Estate'"; 
        $data =mysqli_query ($conn, $result);               

        while ($row = mysqli_fetch_array($data))
         { ?> 

         <option><?php echo $row['sub_categories_name'];?></option>
        <?php }?>
    </select>


    <select id="content-2" class="content hidden form-control" >
        <?php                
        $result = "SELECT * FROM sub_categories where categories_name ='Automobiles'"; 
        $data =mysqli_query ($conn, $result);                 

         while ($row = mysqli_fetch_array($data))
         { ?> 

         <option><?php echo $row['sub_categories_name'];?></option>
         <?php }?>
  </select>

这是js：

<script type="text/javascript">
            $(document).ready(function(){
                $("#options").change(function(){
                    $(".content").addClass("hidden");
                    $("#content-"+$(this).val()).removeClass("hidden");
                });
            });
        </script> 

这里的演示是我的静态二级选择框，我想在其中添加第三级选择框。请帮帮我，我很难被困在里面。这是链接http://jsfiddle.net/Bhawesh7731/6mphs2gn/

Answer 1

问题是你可以通过ajax同时得到你想要的东西，如果你想要按照自己的方式去做

在我的情况下将第三个选择框类“content”更改为“content1”并尝试此脚本

$(document).ready(function(){
   $("#options").change(function(){
      $(".content").addClass("hidden");
    $("#content-"+$(this).val()).removeClass("hidden");
    openAnother($(this).val());
 });
});

function openAnother(val){
       $("#content-"+val).change(function(){
       $(".content1").addClass("hidden");
       $("#content-"+$(this).val()).removeClass("hidden");
    });
  }