javascript - 动态下拉列表在每个 onchange 事件上附加值

Question

我有大约 3 个动态下拉列表，它们在前面的下拉列表的 onchange 事件上填充。 onchange 时，我可以填充下拉列表，但面临的问题是，如果我更改任何下拉列表中的选择，新值将附加到后续下拉列表中的先前值，而不是替换。

下面是我的代码:

 Dropdown1: <select id="ddlFiles" onchange="GetNamedItems()">
              <option diasbled="disabled">Select File</option>
             </select>
 Dropdown2: <select id="ddlNamed" onchange="GetColumns()">
 Dropdown3: <select id="ddlColumn" onchange="GetColumnsY()">

 function GetNamedItems()
 {
 for (var i=0; i <namedItem.length;++i)
 {

  var list =  document.getElementById('ddlNamed');
  var newListItem = document.createElement('OPTION');  
  var listInfo=namedItem[i];

  var box = listInfo;
 newListItem.text = box;
 newListItem.value = box;
 list.add(newListItem); 
 }}

对于其余的下拉菜单也是如此。

Answer 1

在添加新内容之前删除内容

function GetNamedItems() {

  var list = document.getElementById('ddlNamed');
  list.innerHTML = '<option diasbled="disabled">Select File</option>';

  for (var i = 0; i < namedItem.length; ++i) {
    var newListItem = document.createElement('OPTION');
    var listInfo = namedItem[i];
    var box = listInfo;

    newListItem.text = box;
    newListItem.value = box;

    list.add(newListItem);

  }

}