Question

我目前正在开发一个系统，其中有2个下拉列表，分别是型号和目的地。但是，目标是一个动态下拉列表，并且取决于用户选择的模型，并且仅在单击按钮时添加。单击按钮时，动态下拉列表，文本框和标签应一次显示一个，具体取决于所选的目的地。

我的问题是我搞砸了for循环，因为它在每次单击按钮时都会显示所有下拉列表的值，而不考虑所选的下拉列表值。请帮我。我已经调试了一个星期，但仍在学习javascript / jQuery。

到目前为止，这是我的进度：

Content-Length

window.onload = function() {
  document.getElementById("addbtn").addEventListener("click", function() {
    createOptionList();
  });
};

function createOptionList() {

  var destination = document.getElementById("destination");
  var letter = document.getElementById('model').value;
  if (letter != "select") {
    var array = [`${letter}.1`, `${letter}.2`, `${letter}.3`, `${letter}.4`];
    var selectList = document.createElement("select");
    selectList.setAttribute("id", "mySelect");
    destination.appendChild(selectList);

    for (var i = 0; i < array.length; i++) {

      var option = document.createElement("option");
      var des = document.getElementById("destination");
      var br = document.createElement("br");

      option.setAttribute("value", array[i]);
      option.text = array[i];
      selectList.appendChild(option);
      destination.appendChild(br);
    }
    dynamicObjects();
  }
}

function dynamicObjects() {

  var cri = document.getElementById("criteria").value
  var criteria = document.getElementById("criteria");
  var qty = document.getElementById("qty");
  var cell = document.getElementById("cell");
  var option = document.getElementsByTagName("option");
  var blank = "";

  for (var i = 0; i < option.length; i++) {
    var wrapper = document.createElement("span");
    var textbox = document.createElement("input");
    var textbox1 = document.createElement("input");
    var br = document.createElement("br");
    blank = option[i].innerText;

    if (blank == "Model-A.1") {
      wrapper.className = blank;
      textbox.className = blank;
      wrapper.innerText = "Good/n";
      criteria.appendChild(wrapper);
      criteria.appendChild(br);
      qty.appendChild(textbox)
      qty.appendChild(br)
      cell.appendChild(textbox1)
      cell.appendChild(br)

    } else if (blank == "Model-A.2") {
      wrapper.className = blank;
      textbox.className = blank;
      wrapper.innerText = "Fine/n";
      criteria.appendChild(wrapper);
      criteria.appendChild(br);
      qty.appendChild(textbox)
      qty.appendChild(br)
      cell.appendChild(textbox1)
      cell.appendChild(br)
    }
  }
}

th, td {
 padding:15px;
 font-weight: normal;
}

Answer 1

听起来dynamicObjects中根本不需要循环。循环用于执行0到很多次的操作。您只想做一件事。如果您关心的是如何获取选定的选项，请使用value下拉菜单的model属性：

function dynamicObjects() {

  var cri = document.getElementById("criteria").value
  var criteria = document.getElementById("criteria");
  var qty = document.getElementById("qty");
  var cell = document.getElementById("cell");
  var blank = "";

  var wrapper = document.createElement("span");
  var textbox = document.createElement("input");
  var textbox1 = document.createElement("input");
  var br = document.createElement("br");
  blank = document.getElementById('model').value;

  if (blank == "Model-A.1") {
    wrapper.className = blank;
    textbox.className = blank;
    wrapper.innerText = "Good/n";
    criteria.appendChild(wrapper);
    criteria.appendChild(br);         
    qty.appendChild(textbox)
    qty.appendChild(br)
    cell.appendChild(textbox1)
    cell.appendChild(br)    
  } else if (blank == "Model-A.2") {
    wrapper.className = blank;
    textbox.className = blank;
    wrapper.innerText = "Fine/n";
    criteria.appendChild(wrapper);
    criteria.appendChild(br);
    qty.appendChild(textbox)
    qty.appendChild(br)
    cell.appendChild(textbox1)         
    cell.appendChild(br)
  }
}

您还应该帮个忙，并遵循DRY（请勿重复自己）原则。查看这两种情况的共同点，将它们转换为参数，然后提取一个函数。您还可以考虑使用一个对象以声明方式建立一个表示如何构建目的地的模型。在这种情况下，两个模型之间唯一的不同就是您的条件，因此您可以执行以下操作来重复代码：

const models = {
  'Model-A.1': {
    criteria: 'Good'
  },
  'Model-A.2': {
    criteria: 'Fine'
  }
};

function dynamicObjects() {
  var cri = document.getElementById("criteria").value
  var criteria = document.getElementById("criteria");
  var qty = document.getElementById("qty");
  var cell = document.getElementById("cell");
  var blank = "";

  var wrapper = document.createElement("span");
  var textbox = document.createElement("input");
  var textbox1 = document.createElement("input");
  var br = document.createElement("br");
  model = models[document.getElementById('model').value];

  // TODO: handle the case where nothing is selected
  if (!model) {
    return;
  }

  wrapper.className = blank;
  textbox.className = blank;
  wrapper.innerText = model.criteria;
  criteria.appendChild(wrapper);
  criteria.appendChild(br);         
  qty.appendChild(textbox)
  qty.appendChild(br)
  cell.appendChild(textbox1)
  cell.appendChild(br)    
}

在JavaScript中循环动态对象

1 个答案: