更改父选择框时如何删除 Jquery 中的旧选项

How do I remove old options in Jquery when parent select box is changed?

本文关键字：Jquery 删除 选项 选择 何删除      更新时间：2023-09-26

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

根据前 2 个值，

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

我试图清空我的数组，但它不起作用。 

$(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/

在$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();
});

更新的小提琴

相关文章：