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来做，例如，为你的catname和subcatname下拉列表分配一个“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，它非常容易使用。

Answer 2

我会做以下事情：

在第一个下拉列表中，您有一个更改处理程序，用于检查下拉列表中选择的内容。我会将其链接到ajax调用，然后调用正确的数据以允许您填充第二个下拉列表。

谷歌或在这里搜索＆＃34; JQuery on change＆＃34;和＃34; JQuery ajax＆＃34; - 那里有大量的资源。

This is a different approach to same ends

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

2 个答案: