php - 在 php 中创建 2 个相互依赖的下拉菜单

Question

我有这个 html，用于显示 2 个下拉列表。第一个用于类别，第二个用于子类别

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

虽然它工作正常，但我希望根据类别下拉列表中选择的类别显示子类别，但我对 javascript 没有太多了解。谁能告诉我怎么做

Answer 1

您可以使用 AJAX 来完成此操作，例如，为您的目录名和子目录名下拉列表分配一个“id”属性:

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

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

然后使用一些 AJAX 魔法，例如:

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

请注意，此示例使用 jQuery，因此您必须在使用之前将其添加到您的页面。此外，您还需要创建一个 PHP 页面，该页面将为您提供子类别的响应，在本例中我使用了 JSON，它相当易于使用。