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

Question

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

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

<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. But the third drop down for the component select is not.

Thank you in advance for your help!

Your 2nd and 3rd selects all bear the same name and ID attributes. — Funk Forty Niner
– Funk Forty Niner, Commented Oct 30, 2015 at 16:44
So now you just changed them, making this question unclear. check for errors, check your console. — Funk Forty Niner
– Funk Forty Niner, Commented Oct 30, 2015 at 16:46
@Fred-ii- thank you for that. I changed it. Bad thing is that it didn't solve the issue. It looks like my equipment .change event in Jquery isn't firing to call the AJAX event and print the results. — abetwothree
– abetwothree, Commented Oct 30, 2015 at 16:47
@Fred-ii- I've noticed that if I add the <select id="equipment"> in the main file the third drop down appears but the selections are not loaded off the external files. — abetwothree
– abetwothree, Commented Oct 30, 2015 at 16:49

Naveen Butola · Accepted Answer · 2015-10-30 17:02:38Z

1

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>

answered Oct 30, 2015 at 17:02

Naveen Butola

263 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pablo Digiani · Accepted Answer · 2015-10-30 17:05:53Z

0

Try to execute this javascript :

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

... after the first ajax call, like this:

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

Also the third dropdown should be:

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

answered Oct 30, 2015 at 17:05

Pablo Digiani

6025 silver badges9 bronze badges

1 Comment

abetwothree Over a year ago

Hi, thank you for your help. @user2770089 helped me figure it out. Thanks again!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related