Using array to fill dynamic dropdowns

Question

I'm trying to do dynamic dropdowns in PHP using a multidimensional array.

My first select box populates correctly, but upon the choice of a Building, I need the 2nd select box to show the corresponding displays (lobby, break room, etc.) for the first choice

Here's the array:

$displays = array(
  "Company" => array(
    "Building 1"=>array(
      "Displays"=>array(
        "Lobby",
        "Break Room",
        "Office",
        ),
      ),
    "Building 2"=>array(
      "Displays"=>array(
        "Break Room",
        "Office",
        ),
      ),
    "Building 3"=>array(
      "Displays"=>array(
        "Lobby",
        "Break Room",
        ),
      ),
    "Building 4"=>array(
      "Displays"=>array(
        "Lobby",
        "Break Room",
        "Office"
      ),
    ),
  ),
);

And my two select boxes as of now:

/*This select option works to fill the list with building 1 through building 4, as it should*/
<select class="form-control" id="plantSelect">
    <?php foreach($displays["Company"] as $area_name => $area_details): ;?>
    <option><?php echo $area_name ?></option>
    <?php endforeach ?>
</select>

/*I need this one to show the displays (lobby, break room, office, etc.) for each builing as it's selected*/
<select class="form-control" id="areaSelect">
    <?php foreach($displays["Company"] as $area_name => $area_details): ;?>
    <option><?php echo $area_details?></option>
    <?php endforeach ?>
</select>

And my incomplete jquery:

 <script type="text/javascript">
    $("#plantSelect").change(function() {
     $("#areaSelect").load("/*don't know what to put here*/" + $("#plantSelect").val());
    });
</script>

Any help to finish this up is much appreciated

json_encode the array ad have it live in the page as a JS object — mplungjan
– mplungjan, Commented Jul 10, 2018 at 13:23
/*don't know what to put here*/ - at this point, perhaps some research and attempts are in order? With your rep, you know we are here to help you, but to help fix your issues, not to write it for you — Can O'Spam feels disassociated
– Can O'Spam feels disassociated, Commented Jul 10, 2018 at 13:24
@SamSwift웃 right, I'm not asking for anyone to write it. I've used research and attempts to get to this point, but I'm having a hard time finding guidance that isn't based on a JSON object. Just looking for some guidance rather than someone writing it for me — Geoff_S
– Geoff_S, Commented Jul 10, 2018 at 13:41
@TomN. - the point here is, you've asked a question (fair enough), but you haven't shown research or attempts, instead you've explicitly said in the code; /*don't know what to put here*/, which are vital, you've received an answer which worked for you, glad you have, but we need to see what you've got, even if someone writes up something different. We are here to help fix what's broken - instead, you've had the code written for you — Can O'Spam feels disassociated
– Can O'Spam feels disassociated, Commented Jul 10, 2018 at 13:54
@SamSwift웃 yeah, I totally understand your point there. I usually post code that isn't working properly with things I've tried and hope for course correction. I guess here I just hit a brick wall on how far to go. I'll totally take those points into consideration for the future though, thank you! — Geoff_S
– Geoff_S, Commented Jul 10, 2018 at 14:07

mplungjan · Accepted Answer · 2018-07-10 13:41:06Z

2

json_encode the array and have it live in the page as a JS object

var Company = {
  "Building 1": [{
    "Displays": [
      "Lobby",
      "Break Room",
      "Office"
    ]
  }],
  "Building 2": [{
    "Displays": [
      "Break Room",
      "Office"
    ]
  }],
  "Building 3": [{
    "Displays": [
      "Lobby",
      "Break Room"
    ]
  }],
  "Building 4": [{
    "Displays": [
      "Lobby",
      "Break Room",
      "Office"
    ]
  }]
};

$.each(Company, function(bld) {
  $("#plantSelect").append('<option value="' + bld + '">' + bld + '</option>')
});
$("#plantSelect").on("change", function() {
  $("#areaSelect")[0].length=1;
  if (this.value) {
    $.each(Company[this.value][0].Displays,function(_,disp) {
      $("#areaSelect").append('<option value="' + disp + '">' + disp + '</option>')
    });
  }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="plantSelect">
  <option value="">Please select</option>
</select>

<select class="form-control" id="areaSelect">
  <option value="">Please select</option>
</select>

answered Jul 10, 2018 at 13:41

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

3 Comments

Geoff_S Over a year ago

I was hoping to find a way to strictly manipulate the array, but I actually really like this option. I'm going to work with it now, thank you!

Geoff_S Over a year ago

This works perfect now, Thanks! In the future when I have the array coming from a database select, I'm assuming I could go into my script and do something like var company = json_encode($displays) assuming that $displays is the database result, right?

mplungjan Over a year ago

Yes var Companys = <?php echo json_encode($displays => Company); ?>; or however you get the companys level in php

Collectives™ on Stack Overflow

Using array to fill dynamic dropdowns

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related