多个动态下拉选择菜单不起作用-PHP MySQL Jquery


Multiple dynamic drop down select menus not working - PHP MySQL Jquery

我正在构建一个具有三个相关下拉菜单的表单。第一个是存储位置,第二个是位于该位置的设备,第三个是位于此位置的组件。

因此,当我选择一个位置时,页面会发送AJAX请求,以加载该位置设备的选择值。当我选择设备时,它应该加载属于该设备的组件。

组件的第三个下拉列表是未显示的内容。

因此,我的第一个下拉菜单是这样从带有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请求加载得很好。但是组件选择的第三个下拉菜单不是。

提前感谢您的帮助!

嗨,我已经修改了你的代码,请使用这个。

如果这将工作,那么我将解释脚本

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

尝试执行此javascript:

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

在第一次ajax调用之后,如下所示:

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

第三个下拉列表也应该是:

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