create 2 inter dependent dropdown menu in php

Question

i have this html for that displays 2 dropdown. one is for category and second is for subcategory

<form action="a_insert_product.php" method="post">
    <div class="module_content">

        <fieldset>
            <label>Category</label>
            <select name="catname">
                <?php
                        $sql = "SELECT * FROM category";
                        $result = mysqli_query($con, $sql);

                        if (mysqli_num_rows($result) > 0) {
                            while($row = mysqli_fetch_assoc($result)) 
                                {
                                    $catname=$row["catname"];
                                    $catid=$row["id"];

                ?>

                <option value="<? echo $catname.'-'.$catid;?>"><? echo $catname;?></option>

                                <?}
                        }?>
            </select>
        </fieldset> 

        <fieldset>
            <label>Subcategory</label>
            <select name="subcatname">
                <?php
                        $sql = "SELECT * FROM subcategory";
                        $result = mysqli_query($con, $sql);

                        if (mysqli_num_rows($result) > 0) {
                            while($row = mysqli_fetch_assoc($result)) 
                                {
                                    $subcatname=$row["subcatname"];
                                    $subcatid=$row["id"];

                ?>

                <option value="<? echo $subcatname.'-'.$subcatid;?>"><? echo $subcatname;?></option>

                                <?}
                        }?>
            </select>
        </fieldset> 

        <fieldset>
            <label>Product Name</label>
            <textarea rows="2" name="prodname"></textarea>
        </fieldset> 
    </div>
    <footer>
        <div class="submit_link">
            <input type="submit" name="submit" value="Submit" class="alt_btn">
        </div>
    </footer>
</form>

Although it is working fine but i wish to display the subcategory according to the category that is selected in the category dropdown, i don't have much knowledge regarding javascript. can anyone plz tel how it can be done

Answer 1

You can do it using AJAX, for example, assign an "id" attribute to both your catname and subcatname dropdowns:

<select name="catname" id="category-dropdown">

<select name="subcatname" id="subcategory-dropdown">

And then use some AJAX magic, for example:

<script type="text/javascript">
    $("#category-dropdown").change(function() {
        var selection_value = $(this).val();
        $.post("subcategories.php", { category: selection_value },
            function(result){
                 $.each(result, function(index, subcat) {
                      var option_html = "<option>" + subcat.name + "</option>";
                      $("#subcategory-dropdown").append(option_html);
                 }
            },
        "json");
    });
</script>

Please note that this example uses jQuery, so you will have to add it to your page before using. Also, you will need to create a PHP page that will provide you with the response for subcategories, in this case I have used JSON, which is fairly easy to use.

Answer 2

I would do the following:

On the first dropdown, you'd have an on change handler which checks for what is selected in the dropdown. I would link that to an ajax call which then brings in the correct data to allow you to populate the second dropdown.

Google or search on here "JQuery on change" and "JQuery ajax" - there's tons of resources out there.

This is a different approach to same ends