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

从数据库中选择第三级

1 个答案: