Populate dropdown based on selection

Question

I have a select for Year, and a select for Make, and I want to populate only the makes associated with the years that they have. I can currently populate all data from fitmentData.json, but when i try to filter my selection, i cannot figure out a way to get it working. Currently I have an updateMake() function i believed to be working, but after hacking for about 2 hours, I cannot get a solution.

html

  <select name="year" id="year">

  </select>

  <select id="make" name="make">

  </select>
  <select id="model" name="model">

  </select>

js

 //year
    let yearDropdown = $('#year');
    yearDropdown.append('<option selected="true" disabled>Choose     
Year</option>');

    //make(brand in json)
    let brandDropdown = $('#make');
    brandDropdown.append('<option selected="true" disabled>Choose  
Make</option>');

    const url = 'fitmentData.json';

    //append json years in dropdown
    $.getJSON(url, function (data) {
      $.each(data, function (key, entry) {
        yearDropdown.append($('<option></option>').attr('value',  
entry.year).text(entry.year));
      })
      //remove year duplicates
      var map = {}
      $('select option').each(function () {
        if (map[this.value]) {
          $(this).remove()
        }
        map[this.value] = true;
      })
      //append json makes in dropdown
      $.each(data, function (key, entry) {
        brandDropdown.append($('<option></option>').attr('value',  
entry.brand).text(entry.brand));
        updateMake();
      });
      //remove make duplicates
      var map = {}
      $('select option').each(function () {
        if (map[this.value]) {
          $(this).remove()
        }
        map[this.value] = true;
      })

    //updates makes depending on selection
    function updateMake() {
      brandDropdown.empty();
      brandDropdown.append('<option selected="true" disabled>Choose  
Make</option>');
      if (yearDropdown.value == '1976') {
        var optionArray = ["Yamaha", "Kawasaki"];
        //populate makes depending on year
        for (i = 0; i <= optionArray.length; i++) {
          var newOption = document.createElement('option');
          newOption.innerHTML = optionArray[i];
          brandDropdown.append(newOption);
        }
      }
    }

fitmentData.json

 [
 {
    "brand": "Yamaha",
    "model": "XT500",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "TL250",
    "year": "1976"
  },
  {
    "brand": "Yamaha",
    "model": "TT500",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "XL125",
    "year": "1976"
  },
  {
    "brand": "Kawasaki",
    "model": "KE125",
    "year": "1976"
  },
  {
    "brand": "Yamaha",
    "model": "YZ175",
    "year": "1976"
  },
  {
    "brand": "Honda",
    "model": "TL125",
    "year": "1976"
  },
  {
    "brand": "Suzuki",
    "model": "RM125",
    "year": "1976"
  }
]

Once again, I am able to populate all json data in dropdowns, but the updateMake() function is not working as expected. updateMake() causes the makes to not populate any data at all.

Answer 1

You can add onchange event on year element so when there is a change updateMake() is called. Also yearDropdown.value won't work as yearDropdown is a jQuery object, consider using yearDropdown.val() instead:

 var data = [{ "brand": "Yamaha", "model": "XT500", "year": "1976" }, { "brand": "Honda", "model": "TL250", "year": "1976" }, { "brand": "Yamaha", "model": "TT500", "year": "1976" }, { "brand": "Honda", "model": "XL125", "year": "1976" }, { "brand": "Kawasaki", "model": "KE125", "year": "1976" }, { "brand": "Yamaha", "model": "YZ175", "year": "1976" }, { "brand": "Honda", "model": "TL125", "year": "1976" }, { "brand": "Suzuki", "model": "RM125", "year": "1976" } ]; //year let yearDropdown = $('#year').append('<option selected="true" disabled>Choose Year</option>').on('change', function() { updateMake(); }); //make(brand in json) let brandDropdown = $('#make').append('<option selected="true" disabled>Choose Make</option>'); //append json years in dropdown $.each(data, function(key, entry) { yearDropdown.append($('<option></option>').attr('value', entry.year).text(entry.year)); }) //remove year duplicates var map = {} $('select option').each(function() { if (map[this.value]) { $(this).remove() } map[this.value] = true; }) //append json makes in dropdown $.each(data, function(key, entry) { brandDropdown.append($('<option></option>').attr('value', entry.brand).text(entry.brand)); updateMake(); }); //remove make duplicates var map = {} $('select option').each(function() { if (map[this.value]) { $(this).remove() } map[this.value] = true; }) //updates makes depending on selection function updateMake() { brandDropdown.empty(); brandDropdown.append('<option selected="true" disabled>Choose Make</option>'); if (yearDropdown.val() == '1976') { var optionArray = ["Yamaha", "Kawasaki"]; //populate makes depending on year for (i = 0; i < optionArray.length; i++) { var newOption = document.createElement('option'); newOption.innerHTML = optionArray[i]; brandDropdown.append(newOption); } } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="year" id="year"> </select> <select id="make" name="make"> </select> <select id="model" name="model"> </select>