javascript - 当父选择框更改时，如何删除 Jquery 中的旧选项？

Question

我有 3 个使用 jquery 和 json 的链接选择框。

根据前两个值，我过滤第三个值，我的代码实际上有效，但问题是当我更改前两个选择框的值时，第三个选择会收到新数据，同时保留旧数据。

我尝试清空数组，但没有成功。

$(document).ready(function() {
  var json = JSON.parse(jsonString);
  var makesArray = [];
  var selectedyear;
  var selectedcourse;

  var $yearDropDown = $("#DropDown_Year");
  var $course_type = $("#course_type");
  $yearDropDown.change(function() {
     selectedyear = this.value;
    //filter based on  selected year.  
});
        $course_type.change(function(){

   selectedcourse = this.value;
    makesArray = jQuery.grep(json, function(course, i) {
      return course.course_type == selectedcourse && course.year_code == selectedyear;
    })  
    var selectBox = document.getElementById('DropDown_Make');
for(var i = 0, l = makesArray.length; i < l; i++){
  var option = makesArray[i];
  selectBox.options.add( new Option(option.course_code, option.course_code, option.course_code) );
}
makesArray= []; //makesArray.empty(); 
});

});


<div id="DrpDwn">
  Year:
  <select id="DropDown_Year">
    <option>Yıl</option>
        <option value="15">2015-2016</option>
            <option value="16">2016-2017</option>
  </select>
  <select class="form-control" id="course_type" name="course_type" required>
    <option value="" selected> Choose</option>
    <option value="Yos">YÖS</option>
    <option value="SatMatGeo">SAT (MAT)</option>
    <option value="SatCriRea">SAT (ENG)</option>
    <option value="TomerABC">TÖMER (ABC)</option>
    <option value="TomerAB">TÖMER (AB)</option>
    <option value="TomerBC">TÖMER (BC)</option>
    <option value="TomerA1A2">TÖMER (A)</option>
    <option value="TomerB1B2">TÖMER (B)</option>
    <option value="TomerC1C2">TÖMER (C)</option>
  </select>
  Make:
  <select id="DropDown_Make">
    <option>None</option>
  </select>
</div>

这是JSFIDDLE

https://jsfiddle.net/rw7cb8c5/25/

Answer 1

使用 $course_type.change() 中的 selectBox.innerHTML = "" 将 DropDown_Make 清空，如下所示。

$course_type.change(function () {
    selectedcourse = this.value;
    makesArray = jQuery.grep(json, function (course, i) {
        return course.course_type == selectedcourse && course.year_code == selectedyear;
    })
    var selectBox = document.getElementById('DropDown_Make');

    selectBox.innerHTML = ""; //added this line

    for (var i = 0, l = makesArray.length; i < l; i++) {
        var option = makesArray[i];
        selectBox.options.add(new Option(option.course_code, option.course_code, option.course_code));
    }
    makesArray.empty();
});

UPDATED FIDDLE