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

  }

}

Answer 2

我昨天确实遇到了这个问题，表格重置功能。</ p>

关键是：

$(select).empty();

然后重新填充下拉菜单。。

Answer 3

不确定你的问题。在添加新的

之前尝试使用.remove（）

$(select).remove();

Answer 4

工作代码：

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

}

}

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

4 个答案: