javascript - 根据选择填充下拉列表

Question

我选择了“年份”和“品牌”，并且我只想填充与年份相关的品牌。我目前可以填充 fitmentData.json 中的所有数据，但是当我尝试过滤我的选择时，我无法找到让它工作的方法。目前我有一个 updateMake() 函数，我相信它可以工作，但是在黑客攻击了大约 2 小时后，我无法得到解决方案。

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"
  }
]

我再次能够填充下拉列表中的所有 json 数据，但 updateMake() 函数未按预期工作。 updateMake() 导致 make 根本不填充任何数据。

Answer 1

您可以在 year 元素上添加 onchange 事件，以便在发生更改时调用 updateMake() 。另外，由于yearDropdown是一个jQuery对象，所以yearDropdown.value也不起作用，请考虑使用yearDropdown.val()代替:

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>