多個動態下拉選擇菜單不起作用-PHP MySQL Jquery

Question

我正在構建一個表單，它將具有三個相關的下拉菜單。 第一個是商店位置，第二個設備在此位置，第三個是組件在此位置。

因此，當我選擇一個位置時，頁面會發送一個AJAX請求，以在該位置加載設備的選擇值。 當我選擇設備時，它應該加載屬於該設備的組件。

組件的第三個下拉列表沒有出現。

因此，我的第一個下拉列表是這樣從div的主文件中刪除的，其中div是通過AJAX調用添加的：

<div class="input-group">
 <strong>Select A Store Location:</strong>
     <select class="form-control selectDesk" name="Location_ID" id="Location_ID">
         <option value=1>HT1</option>
         <option value=2>HT2</option>
         <option value=3>HT3</option>
         <option value=4>HT4</option>
         <option value=5>HT5</option>
         <option value=6>HT6</option>
    </select>
</div>

<div id="equipment">
</div>

<div id="component">
</div>

第二個下拉列表是動態加載的不同文件，並通過Jquery和AJAX插入div中。 這是實現這一目標的代碼

<?php
include('DBConnect.php');
$locID = $_POST['loc_id'];
$equipSQL ="SELECT Equipment_ID, Equipment_Name FROM Equipment WHERE Location_ID = $locID";
$equipResult = $my_dbhandle->query($equipSQL);
$numResults = $equipResult->num_rows;
?>
<strong>Select Equipment:</strong>
    <div class="input-group">
        <select class="form-control" name="Equipment_ID" id="Equipment_ID" style="min-width: 375px;">
            <option value="0">No Equipment Needed For This Task</option>
        <?php
            for ($i=0; $i < $numResults; $i++){ //this will loop through the results and print them in the drop down menu
                $row = $equipResult->fetch_assoc(); //Parse result into rows
                echo "<option value=" . $row['Equipment_ID'] . ">" . $row['Equipment_Name'] . "</option>\n";
            }
        ?>
        </select>
    </div>

我的第三個下拉菜單也通過Jquery和AJAX從另一個文件加載

<?php
include('DBConnect.php');
$equipID = $_POST['equip_id'];
$compSQL ="SELECT Component_ID, Component_Name FROM Components WHERE Equipment_ID = $equipID";
$compResult = $my_dbhandle->query($compSQL);
$numResults = $compResult->num_rows;
?>
<strong>Select Component:</strong>
    <div class="input-group">
        <select class="form-control" name="Component_ID" id="Component_ID" style="min-width: 375px;">
            <option value="0">No Component Needed For This Task</option>
        <?php
            for ($i=0; $i < $numResults; $i++){ //this will loop through the results and print them in the drop down menu
                $row = $compResult->fetch_assoc(); //Parse result into rows
                echo "<option value=" . $row['Component_ID'] . ">" . $row['Component_Name'] . "</option>\n";
            }
        ?>
        </select>
    </div>

jQuery如下所示：

<script>
$("#Location_ID").change(function(){
    var locID = "";

    var locID = $('#Location_ID').val();

    $.ajax({
       type: 'post',
       url: 'equipDropDownByLocRepeatingTask.php',
       data: 'loc_id=' + locID,
       success: function (r) {
           $('#equipment').html(r);
       }
    });
}).change();

$("#Equipment_ID").change(function(){
    var equipID = "";

    var equipID = $('#Equipment_ID').val();

    $.ajax({
       type: 'post',
       url: 'compDropDownByLocRepeatingTask.php',
       data: 'equip_id=' + equipID,
       success: function (r) {
           $('#component').html(r);
       }
    });
}).change();

</script>

因此，再次加載第二個設備的第一個AJAX請求就很好了。 但是組件選擇的第三個下拉列表卻沒有。

預先感謝您的幫助！

Answer 1

嗨，我已經修改了您的代碼，請使用此代碼。

如果可以，那么我將解釋腳本

 <script>
$("#Location_ID").change(function(){
    var locID = "";

    var locID = $('#Location_ID').val();

    $.ajax({
       type: 'post',
       url: 'equipDropDownByLocRepeatingTask.php',
       data: 'loc_id=' + locID,
       success: function (r) {
           $('#equipment').html(r);
           initSecond();
       }
    });
}).change();

function initSecond(){    
$("#Equipment_ID").change(function(){
    var equipID = "";
    var equipID = $('#Equipment_ID').val();
    $.ajax({
       type: 'post',
       url: 'compDropDownByLocRepeatingTask.php',
       data: 'equip_id=' + equipID,
       success: function (r) {
           $('#component').html(r);
       }
    });
}).change();
}
</script>

Answer 2

嘗試執行此javascript：

$("#Equipment_ID").change(function(){ ....

...在第一個ajax調用之后，如下所示：

success: function (r) { 
  $('#equipment').html(r);
  $("#Equipment_ID").change(function(){
    ...
    ...
  }
 }

同樣，第三個下拉列表應該是：

<select name="Component_ID" and id="Component_ID" ...