Question

我正在构建一个包含三个相关下拉菜单的表单。第一个是商店位置，第二个是该位置的设备，第三个是该位置的组件。

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

组件的第三次下拉是没有出现的。

所以我的第一个下拉菜单就像主文件一样，带有通过AJAX调用添加下拉列表的div：

  <script>
// for each tab link
$('li.reviews-tab a').each(function() {
// does it's related div (by content id) not have a p element?
if ($('#tab4' + $(this).data('content-id') + ' > p').length == 0) {
    // if not, find the link's parent li element and hide it
    $(this).parent('li.reviews-tab').hide();
}
});
    </script>

第二个下拉列表是从另一个文件动态加载的，并通过Jquery和AJAX插入到div中。这是实现这一目标的代码

<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加载了另一个文件

<?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如下：

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

再次，第二次设备下拉的第一个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" ...

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

2 个答案: