在JavaScript中循環動態對象

Question

我目前正在開發一個系統，其中有2個下拉列表，分別是型號和目的地。 但是，目標是一個動態下拉列表，並且取決於用戶選擇的模型，並且僅在單擊按鈕時添加。 單擊按鈕時，動態下拉列表，文本框和標簽應一次顯示一個，具體取決於所選的目的地。

我的問題是我搞砸了for循環，因為它在每次單擊按鈕時都會顯示所有下拉列表的值，而沒有考慮所選下拉列表的值。 請幫我。 我已經調試了一個星期，但仍在學習javascript / jQuery。

到目前為止，這是我的進度：

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

 <div class = "container"> <table class = "table"> <tr> <td> MODEL: </td> <td> <select id="model" name="model" onchange="populate(this.id, 'destination')"> <option value="select">--Select Model--</option> <option value="Model-A">Model-A</option> <option value = "Model-B"> Model-B </option> </select> </td> </tr> </table> <input type="button" id="addbtn" value="Add Destination"/> <hr> <table> <tr> <th><center> DESTINATION: </th></center> <th><center> CRITERIA: </th></center> <th><center> QTY: </th></center> <th><center> CELL: </th></center> </tr> <tr> <td width = "140"> <center> <div id="destination" style = "width:230px; word-wrap: break-word"> </center> </div> </td> <td width = "140"> <center> <div id="criteria" style = "width:350px; word-wrap: break-word"> </center> </div> </td> <td width = "140"> <center> <div id = "qty" required> </td> </center> <td width = "140"> <center> <div id = "cell" required> </td> </center> </tr> 

Answer 1

聽起來好像您的dynamicObjects根本不需要循環。 循環用於執行0到很多次的操作。 您只想做一件事。 如果您關心的是如何獲取選定的選項，請使用model下拉列表的value屬性：

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