Зацикливание динамических объектов в 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 до много раз.Вы хотите сделать только одну вещь.Если вы беспокоитесь о том, как получить выбранную опцию, используйте свойство 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)
  }
}

Вы также должны сделать одолжение и следовать СУХОЙ (не повторять себя)принцип.Посмотрите, что является общим для этих двух случаев, преобразуйте их в параметры и извлеките функцию.Вы также можете рассмотреть возможность использования объекта для декларативной настройки модели, представляющей, как вы строите свои пункты назначения.В этом случае единственное, что отличается между двумя моделями, это ваши критерии, поэтому вы можете сделать что-то вроде этого, чтобы де-дублировать код:

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