使用第一个选择框值从数据库中触发/过滤第二个选择框的数据

Question

所以我想让我的选择下拉框灵活，但是我尝试使用我在网上找到的 AJAX，但 AJAX 请求是独立数据，它不会返回数据。

有没有方便的方法来获取数据并能够提交到另一个 PHP 文件？

这是我的代码

index.php

<td>
                    <select id="ownerID" name="OwnerID" class="id" required> 
                    <?php 

                    $Employee_ID='';

                    $sql1="SELECT Employee_ID FROM user1 WHERE Position1='QE' OR Position1='OTHER'";
                    $result1=odbc_exec($conn,$sql1);?>
                    <option value="">Choose</option>
                    <?php while($row1=odbc_fetch_array($result1)){
                        $Employee_ID=$row1['Employee_ID'];
                    ?>
                        <option value ="<?php echo $Employee_ID;?>"><?php echo $Employee_ID;?></option>
                    <?php           
                    }
                    ?>
                    </select>
                </td>
                </tr>
                <tr>
                <td id="response" style="margin-left:50px;">
                </td>

AJAX

<script type="text/javascript">
    $(document).ready(function(){
        $("select.id").change(function(){
            $("#response option").remove();
            var selectedOwner = $(".id option:selected").val();
            $.ajax({
                type: "POST",
                url: "process-request.php",
                data: { id : selectedOwner}
            }).done(function(data){
                $("#response").html(data);
            });
        });
    });
</script>

post-requst.php

if(isset($_POST["id"])){
        $id = $_POST["id"];
        
        $Form_Tracking_ID=null;

        $sql="SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 IS NULL AND CEF_ID IS NULL
        UNION SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 IS NULL AND CEF_ID = ' ' 
        UNION SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 = ' ' AND CEF_ID IS NULL
        UNION SELECT Form_Tracking_ID FROM masterlist1 WHERE Owner_I_Employee_ID = '$id' AND Tool_Status='Active' AND Dereg_Reason1 = ' ' AND CEF_ID = ' '";
        $result=odbc_exec($conn,$sql);
        if($id !== 'Choose'){
        echo "<label>Tool ID:</label>";
        echo "<br><select id='toolid' name='ownerid' required>"; ?>
            <option value="">Choose</option>
        <?php while($row=odbc_fetch_array($result)){
            $search=$row['Form_Tracking_ID']; ?>
            <option value="<?php echo $search ?>"><?php echo $search ?></option>
        <?php  }   
        echo "</select>";

        }      
    }

Answer 1

    You can use a function for get data from database, getting value of 1º select and put them on 2º select
    //Get value from 1 select
    $("#firstSelect").change(function () {
        let firstSelectValue = $("#firstSelect").val();
        $("#secondSelect").text("");
//Calling a function to get value from database
        getDataForSecondSelect(firstSelectId);
      })
    
    
      function getDataForSecondSelect(firstSelectValue) {
        $.ajax({
          url: `getDataForSecondSelect.php?value=${firstSelectValue}`,
          method: "GET",
          dataType: "JSON",
          success: function (message) {
            if (message.length != 0) {
              $('#secondSelect').prop('disabled', false);
              for (let i = 0; i <= message.length; i++) {
                $("#secondSelect").prepend(`<option value=${message[i]["id"]}>${message[i]["name"]}</option>`);
              }
            } else {
              $("#subcategoriaProduto").text("");
              $("#subcategoriaProduto").prepend("<option>There's no data</option>");
              $('#subcategoriaProduto').prop('disabled', true);
            }
    
          }
        });
      }