从dropdown2的onChange事件填充dropdown1

Question

我需要编写一个代码，在这里我需要基于选择另一个下拉列表从mysql表中填充一个dropdown1，在这个下拉列表中，还需要将下拉列表的值作为mysql表的项id，但是script.js不接受任何对这个概念非常陌生的数值.Am，请帮助我解决这个问题，谢谢。

HTML部件

<div>
    <select class="custom-select" style="width: 150px;" id="dropdown1" onchange="onChange()">
        <option selected disabled>Select Role </option>
        <?php
enter code here
            $sql = "SELECT * FROM category";
            $result = $conn->query($sql);
   //Populate dropdown2 from onChange event of dropdown1 
            if ($result->num_rows > 0){
                    // output data of each row
                    while($row = $result->fetch_assoc()){
                    echo "<option class='dropdown-item' value='".$row["id"]."'>".$row["name"]."</option>";
                }
            } else{
                echo "Sorry No Role Availabe for Now";
            }
            $conn->close(); 
        ?>
    </select><br/>
    <span id="choosen"></span>
</div>

JS部件

<script>
    function onChange(){
        var idforquery =document.getElementById('dropdown').value;
        document.getElementById("choosen").innerHTML="
        // Here we generate another dropdown of behalf of selected dropdown option 
        <div>
            <select class="custom-select" style="width: 150px;" id="dropdown1">
                <option selected disabled>Select Role </option>
                <?php
                    $sql2 = "SELECT * FROM sub_category WHERE cat_id =idforquery;";
                    $result = $conn->query($sql2);
        
                    if ($result->num_rows > 0){
                            // output data of each row
                            while($row = $result->fetch_assoc()){
                            echo "<option class='dropdown-item' value='".$row["id"]."'>".$row["name"]."</option>";
                        }
                    } else{
                        echo "Sorry No Role Availabe for Now";
                    }
                    $conn->close(); 
                ?>
            </select><br/>
        
            <span id="choosen1"></span>
        </div>";
    }
</script>

Answer 1

这不管用。只有在客户端加载页面时才执行PHP代码。如果希望在页面加载后动态更改<option>标记，则需要使用异步请求(AJAX)。

下面是关于如何使用PHP和jQuery使用AJAX请求的jQuery。