简体   繁体   English

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

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

I am building a form that will have three related drop down menus. 我正在构建一个表单,它将具有三个相关的下拉菜单。 First one is store locations, second Equipment at this location, third is components at this location. 第一个是商店位置,第二个设备在此位置,第三个是组件在此位置。

So when I pick a location the page sends an AJAX request to load the select values for the equipment at this location. 因此,当我选择一个位置时,页面会发送一个AJAX请求,以在该位置加载设备的选择值。 And when I pick the equipment it should load the components that belong to that equipment. 当我选择设备时,它应该加载属于该设备的组件。

The third drop down for components is what's not appearing. 组件的第三个下拉列表没有出现。

So my first drop down goes like this off the main file with the divs where the drop downs are added via AJAX calls: 因此,我的第一个下拉列表是这样从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>

The second drop down is dynamic loaded off a different file and inserted in a div via Jquery and AJAX. 第二个下拉列表是动态加载的不同文件,并通过Jquery和AJAX插入div中。 This is the code to make that happen 这是实现这一目标的代码

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

And my third drop down is also loaded off another file via Jquery and AJAX 我的第三个下拉菜单也通过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>

The Jquery is as follows: 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>

So again, the first AJAX request for the second equipment drop down is loaded just fine. 因此,再次加载第二个设备的第一个AJAX请求就很好了。 But the third drop down for the component select is not. 但是组件选择的第三个下拉列表却没有。

Thank you in advance for your help! 预先感谢您的帮助!

Hi I have modified your code please use this. 嗨,我已经修改了您的代码,请使用此代码。

If this will work then I will explain the script 如果可以,那么我将解释脚本

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

Try to execute this javascript : 尝试执行此javascript:

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

... after the first ajax call, like this: ...在第一个ajax调用之后,如下所示:

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

Also the third dropdown should be: 同样,第三个下拉列表应该是:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM