inetmgraim inetmgraim - 1 month ago 8
Javascript Question

Dropdown field that changes upon location

First and foremost, I know this must be simple but I am just not seeing how to do what I need to do. What I need help on is 2 vanilla JS form dropdown fields that list an array of locations, and then the dates that pertain to them. The second drop-down will need to show a selected group of 'course dates'. Because all of the locations have varying dates of service, this second drop-down will need to change upon the first initial selection.

I have some HTML and js below, I just don't know how to link the two together. If any one could provide me with completely operational drop-down fields that change upon the location selected, or a jsfiddle, that would be extravagant.

The HTML of what I have so far (Im not sure how to create the dropdown for my 'dates')

<select class="form-control" id="campus" name="campus" required="" title="Campus">
<option value="AIMNAT" style="alignment-adjust:middle;" selected="selected">Select Your Nearest Location</option>
<option value="AMA">Atlanta, GA</option>
<option value="AMD">Dallas, TX</option>
<option value="AMH">Houston, TX</option>
<option value="AMI">Indianapolis, IN</option>
<option value="AMK">Kansas City, MO</option>
<option value="AIML">Las Vegas, NV</option>
<option value="AMO">Orlando, FL</option>
<option value="AMP">Philadelphia, PA</option>
<option value="AMS">San Francisco, CA</option>
<option value="AMN">Virginia Beach, VA</option>
<option value="AMM">Washington, DC</option>

</select>


Javascript

var locations = {
"AMA" : {
"August 19-20",
"September 19-20",
"January 19-20"
},
"AMH" : {
"August 19-20",
"September 19-20",
"January 19-20"
},
"AIML" : {
"August 19-20",
"September 19-20",
"January 19-20"
}
};

// when user selects a location
$('.locations-select').on('change', function() {
// get selected option
var location = $('.locations-select option:selected');

// clear the pervious options for dates
$('.dates-select').empty();

// popluate dates
$.each(locations[locaiton], function(idx, el) {
$('.dates-select').append('<option value="' + idx + '">' + el + "</option>");
})
})


It can even be similar to this jsfiddle in which there is a second field that appears, I just need it to populate with multiple location's relevant dates.

Answer Source

there were a couple mistakes and a lot of missing stuff but I sorted it out to make a jsfiddle of what I believe to be what you need. Now, since I want you to learn from this and not just have someone do it for you, I will list the things I changed and the reasons I did.

JS

var locations = {
  AMA : { 
      0: "August 19-20",
      1: "September 19-20",
      2: "January 19-20"
      },
  AMH : {
      0: "August 19-21",
      1: "September 19-21",
      2: "January 19-21"
  },
  AIML : {
      0: "August 19-22",
      1: "September 19-22",
      2: "January 19-22"
  }
};

// when user selects a location
$('#campus').on('change', function() {
  // get selected option
  var location = $('#campus').find(':selected').val();
  // clear the pervious options for dates
  $('#dates').empty();

  // popluate dates
  $.each(locations[location], function(index) {
      $('#dates').append('<option value="' + index + '">' + this + "</option>");
  });
});

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <select class="form-control" id="campus" name="campus" required="" 
    title="Campus">
        <option value="AIMNAT" style="alignment-adjust:middle;" 
selected="selected">Select Your Nearest Location</option>
        <option value="AMA">Atlanta, GA</option>
        <option value="AMD">Dallas, TX</option>
        <option value="AMH">Houston, TX</option>
        <option value="AMI">Indianapolis, IN</option>
        <option value="AMK">Kansas City, MO</option>
        <option value="AIML">Las Vegas, NV</option>
        <option value="AMO">Orlando, FL</option>
        <option value="AMP">Philadelphia, PA</option>
        <option value="AMS">San Francisco, CA</option>
        <option value="AMN">Virginia Beach, VA</option>
        <option value="AMM">Washington, DC</option>
        </select>
<select id='dates'>
</select>
  1. The HTML contained no select for the Dates. So I created a new one.
  2. I used HTML ids to target the select (preference) when doing this, you can just replace the "." by a "#" in the JQuery.
  3. The "locations" object was not a valid JavaScript object. It looks for like a JSON string to me. You can change it like I did to make it a JavaScript object or parse it as JSON by adding JSON.parse().
  4. I changed the way you get the value of the selected option. I first target the item with the id, then I find the element that is selected and get its value. You could also get the text if you want to use that instead.
  5. Finally, in the $.each, I use the index (as parameter) for the value of the field, and I use the object itself (this) as the value.