javascript - Dropdown field that changes upon location -

first , foremost, know must simple not seeing how need do. need on 2 vanilla js form dropdown fields list array of locations, , dates pertain them. second drop-down need show selected group of 'course dates'. because of locations have varying dates of service, second drop-down need change upon first initial selection.

i have html , js below, don't know how link 2 together. if 1 provide me operational drop-down fields change upon location selected, or jsfiddle, extravagant.

the html of have far (im not sure how create dropdown 'dates')

<select class="form-control" id="campus" name="campus" required="" title="campus">         <option value="aimnat" style="alignment-adjust:middle;" selected="selected">select 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 location $('.locations-select').on('change', function() { // selected option var location = $('.locations-select option:selected');  // clear pervious options dates $('.dates-select').empty();  // popluate dates $.each(locations[locaiton], function(idx, el) {     $('.dates-select').append('<option value="' + idx + '">' + el + "</option>"); }) }) 

it can similar jsfiddle in there second field appears, need populate multiple location's relevant dates.

there couple mistakes , lot of missing stuff sorted out make jsfiddle of believe need. now, since want learn , not have you, list things changed , reasons 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 location $('#campus').on('change', function() {   // selected option   var location = $('#campus').find(':selected').val();   // clear pervious options dates   $('#dates').empty();    // popluate dates   $.each(locations[location], function(index) {       $('#dates').append('<option value="' + index + '">' + + "</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 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 dates. created new one.
2. i used html ids target select (preference) when doing this, can replace "." "#" in jquery.
3. the "locations" object not valid javascript object. looks json string me. can change did make javascript object or parse json adding json.parse().
4. i changed way value of selected option. first target item id, find element selected , value. text if want use instead.
5. finally, in $.each, use index (as parameter) value of field, , use object (this) value.

wiki