mercredi 23 août 2017

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.




Aucun commentaire:

Enregistrer un commentaire