使用PHP / Javascript将三个动态下拉列表转换为一个动态多级下拉列表？

Question

Hi guys I have a three dynamic dropdown which contains category, subcategory, question. So under a category there's a subcategory and under a subcategory there's questions. Here's my code for it.

new1.php

    <?php
    $con = mysqli_connect("localhost","user","","database") or die ("Cannot connect to the database!");

    ?>

        <form name="form1" action="" method="post">
            <table>
                <tr>
                    <td>Select Category</td>
                    <td><select class="form-control" style="width: 150px;" id="categorydd" name="catdd" onChange="change_category()">
                            <option>Select</option>
                            <?php
                                $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
                                while($row=mysqli_fetch_array($query)) {
                                    ?>
                                    <option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>

                                    <?php
                                }
                            ?>




                        </select>
                    </td>
                </tr>

                <tr>
                    <td>Select Subcategory</td>
                    <td>
                        <div id="subcategory">
                            <select class="form-control" style="width: 150px;">
                                <option>Select</option>
                            </select>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>Select Question</td>
                    <td>
                        <div id="question">
                            <select class="form-control" style="width: 150px;">
                                <option>Select</option>
                            </select>
                        </div>
                    </td>
                </tr>

            </table>


        </form>

    <script type="text/javascript">

            function change_category()
            {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET","new2.php?category="+document.getElementById("categorydd").value, false);
                xmlhttp.send(null);
                document.getElementById("subcategory").innerHTML = xmlhttp.responseText;

                if(document.getElementById("categorydd").value=="Select"){
                    document.getElementById("question").innerHTML="<select><option>Select</option></select>";
                }
            }


        function change_question()
        {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET","new2.php?subcategory=" + document.getElementById("subcategorydd").value, false);
            xmlhttp.send(null);
            document.getElementById("question").innerHTML = xmlhttp.responseText;
        }

</script>

new2.php

 <?php
    $con = mysqli_connect("localhost","root","","imetrics") or die ("Cannot connect to the database!");

    $category= isset($_GET["category"])?$_GET["category"]:"";
    $subcat=isset($_GET["subcategory"])?$_GET["subcategory"]:"";
    $question=isset($_GET["subcategory"])?$_GET["subcategory"]:"";

    if($category !="") {

        $query = mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID =$category ");
        echo "<select id='subcategorydd' class='form-control' style='width:150px;' name='subcatdd' onchange='change_question()' >";
        echo "<option>"; echo "Select"; echo "</option>";
          while($row=mysqli_fetch_array($query))
        {
            echo "<option value='$row[category_id]'>" ; echo $row["categoryname"]; echo "</option>";
        }
        echo "</select>";
    }

    if($subcat !="") {

        $query=mysqli_query($con, "SELECT * FROM question WHERE question_subcat = $subcat ");
        echo "<select>";
        while($row=mysqli_fetch_array($query))
        {
            echo "<option value='$row[question_id] selected'>" ; echo $row["questiontitle"]; echo "</option>";
        }
        echo "</select>";

    }



    ?>

I plan to put an insert query at the end but then I realize having three dropdowns to insert is a hassle so I assume making it a multilevel dropdown will make it easier? So my final question is how do I convert this code that consist three dynamic dropdowns into one dynamic multilevel dropdown.

Answer 1

Here is plain HTML/CSS for multilevel dropdown.

 .parent {display: block;position: relative;float: left;line-height: 30px;background-color: #4FA0D8;border-right:#CCC 1px solid;} .parent a{margin: 10px;color: #FFFFFF;text-decoration: none;} .parent:hover > ul {display:block;position:absolute;} .child {display: none;} .child li {background-color: #E4EFF7;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;} .child li a{color: #000000;} ul{list-style: none;margin: 0;padding: 0px; min-width:10em;} ul ul ul{left: 100%;top: 0;margin-left:1px;} li:hover {background-color: #95B4CA;} .parent li:hover {background-color: #F0F0F0;} .expand{font-size:12px;float:right;margin-right:5px;} 

 <ul id="menu"> <li class="parent"><a href="#">Popular Toys</a> <ul class="child"> <li class="parent"><a href="#">Video Games <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Car</a></li> <li><a href="#">Bike Race</a></li> <li><a href="#">Fishing</a></li> </ul> </li> <li><a href="#">Barbies</a></li> <li><a href="#">Teddy Bear</a></li> <li><a href="#">Golf Set</a></li> </ul> </li> <li class="parent"><a href="#">Recent Toys</a> <ul class="child"> <li><a href="#">Yoyo</a></li> <li><a href="#">Doctor Kit</a></li> <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a> <ul class="child"> <li><a href="#" nowrap>Cards</a></li> <li><a href="#" nowrap>Numbers</a></li> </ul> </li> <li><a href="#">Uno Cards</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> </ul> 

Reference