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

Dynamic dropdown list appending values on every onchange event

本文关键字：附加值 动态 下拉列表 事件 onchange      更新时间：2023-09-26

我有大约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); 
 }}

其余的下降也是如此。

在附加新的之前删除内容

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);
  }
}

我昨天在表单重置函数中遇到了这个问题。

关键是：

$(select).empty();

然后重新填充下拉列表。

不确定您的问题。在附加新的之前，请尝试使用.remove（）

$(select).remove();

工作代码：

function GetNamedItems() {
 var list = document.getElementById('ddlNamed');
                   $('#ddlNamed').find('option:gt(0)').remove();

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);
}
}
相关文章：