JavaScript实现下拉列表组动态增删功能异常求助

问题排查 #

你的代码主要有3处核心逻辑不匹配需求：

• 新增下拉列表时，你直接将<select>插入到了body根节点，而不是你预留的#list容器中，和删除逻辑的操作对象完全脱节
• 所有新增的下拉列表都用了重复的id="mySelect"，不符合DOM id唯一的规范
• 删除逻辑完全沿用了原文本域版本的逻辑，和你要「删除最底部下拉列表」的需求不匹配：原逻辑需要从输入框取值找对应元素删除，而且是操作#list下的子元素，但你新增的下拉列表根本不在#list里，自然无法生效

修正后代码 #

HTML #

<ul id="list"></ul>
<button onclick="addItem()" class="buttonClass">Add item</button>
<button onclick="removeItem()" class="buttonClass">Remove item</button>

JavaScript #

// 选项数组
var optionArray = ["Volvo","Saab","Mercades","Audi"];
// 下拉列表容器
var listContainer = document.getElementById("list");

// 新增下拉列表
function addItem() {
  var selectList = document.createElement("select");
  // 若有需要可以用序号区分id，比如 selectList.id = "mySelect" + listContainer.children.length
  listContainer.appendChild(selectList);
  // 插入选项
  for (var i = 0; i < optionArray.length; i++) {
    var option = document.createElement("option");
    option.value = optionArray[i];
    option.text = optionArray[i];
    selectList.appendChild(option);
  }
}

// 删除最底部的下拉列表
function removeItem() {
  // 只要容器里还有子元素，就删除最后一个
  if (listContainer.lastElementChild) {
    listContainer.removeChild(listContainer.lastElementChild);
  }
}

内容的提问来源于stack exchange，提问作者usr18