javascript - 附加选项列表但删除以前的选项

Question

您好，我尝试根据另一个选择动态地在选择列表中附加选项:

<select>
  <option value='firstValue'>firstValue</option>
  <option value='secondValue'>secondValue</option>
</select>

<select>
  // options appended from json depending
</select>

所以我正在这样做

xhr.onreadystatechange = function () {

   if(this.readyState === 4 && this.status === 200) {

      data = JSON.parse(this.responseText);
      data.races.map(function(race){
       $(race).appendTo(mySelect)
     })

   }
}

这工作正常，但我希望新选项能够替换以前的选项，如果并且不堆叠在同一选择上。我尝试过使用 .html() ，但它只附加数组的最后一个值我也尝试过:

    $(mySelect).find('option').remove().end().append($(raza))

但它的作用与以前相同，只是仅附加数组的最后一个值，我可以获得有关如何完成此操作的任何帮助吗？谢谢!

Answer 1

清除元素的最简单方法是将其长度设置为零。

例如:

var select = document.getElementById("mySelect");
select.length = 0;  

这将删除列表中的所有元素。在循环数据并添加新项目之前执行此操作。