从数据库中选择第三级

时间:2019-01-18 12:05:23

标签: jquery mysql

我正在尝试从选择框的第三级选择数据,即当我从第一个选择框选择任何选项时,第二个选择框就会出现,并且它具有与第一个选择框相关的选项,到目前为止,所有工作很好。现在我试图再上一层,即当我从第二个选择框中选择选项时,将出现第三个选择框,其中包含与第二个选择框相关的选项。第二和第三选择框中的所有数据都来自数据库。

这是我的代码:-

     <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/

1 个答案:

答案 0 :(得分:0)

问题是,您可以通过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");
    });
  }