Javascript- if / else для операторов внутри оператора switch

Я работаю с порталом запросов, и у меня есть эти динамические флажки, метки и текстовые поля, которые зависят от списка параметров.

Я новичок в javascript, и мне сложно делать условные выражения. Вот мой прогресс до сих пор, я только продублировал функции, чтобы они отображали значения, когда выбран другой вариант, но он перекрывает первый выбор.

<!DOCTYPE html>
<html>

<head>

  <style>
    th,
    td {
      padding: 15px;
      font-weight: normal;
    }
  </style>

  <script type = "text/javascript">
    function populate(model, destination) {
      var mod = document.getElementById(model);
      var des = document.getElementById(destination);
      var cri = document.getElementById(criteria);
      des.innerHTML = "";

      if (mod.value == "Model-A") {
        var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
      } else if (mod.value == "Model-B") {
        var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3", "Model-B.4"];
      }

      for (var option in optionArray) {
        if (optionArray.hasOwnProperty(option)) {
          var pair = optionArray[option];
          var checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.name = pair;
          checkbox.value = pair;
          checkbox.onclick = updateCriteria;
          des.appendChild(checkbox);

          var label = document.createElement('label')
          label.htmlFor = pair;
          label.appendChild(document.createTextNode(pair));

          des.appendChild(label);
          des.appendChild(document.createElement("br"));
        }
      }

      updateCriteria();
      updateCriteria2();
    }

    function updateCriteria() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");

      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-A.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Good\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

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

        } else if (model == "Model-A.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Bad\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }

    function updateCriteria2() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");



      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-B.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Latest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.2") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "New\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Old\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.4") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Oldest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }
  </script>
</head>

<body>

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

    <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>
          <center>
            <div id = "destination" style = "width:230px; word-wrap: break-word">
          </center>
          </div>
        </td>
        <td>
          <center>
            <div id = "criteria" style = "width:350px; word-wrap: break-word">
          </center>
          </div>
        </td>
        <td>
          <center>
            <div id = "qty" required>
              </textarea>
        </td>
        </center>
        <td>
          <center>
            <div id = "cell" required>
              </textarea>
        </td>
        </center>
      </tr>
    </table>
javascript jquery html css switch-statement
21.09.2018 03:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я изменил ваш код, попробуйте следующее:

 function populate(model, destination) {
      var mod = document.getElementById(model);
      var des = document.getElementById(destination);
      var cri = document.getElementById("criteria");
      
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");
      
		var optionArray = [];
      if (mod.value == "Model-A") {
      des.innerHTML = "";
      if (cri)
      	cri.innerHTML = "";
      if (qty)
      	qty.innerHTML = "";
        if (cell)
      	cell.innerHTML = "";
        
        optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
      } else if (mod.value == "Model-B") {
      des.innerHTML = "";
      if (cri)
      	cri.innerHTML = "";
        if (qty)
      	qty.innerHTML = "";
        if (cell)
      	cell.innerHTML = "";
        optionArray = ["Model-B.1", "Model-B.2", "Model-B.3", "Model-B.4"];
      }

      for (var option in optionArray) {
        if (optionArray.hasOwnProperty(option)) {
          var pair = optionArray[option];
          var checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.name = pair;
          checkbox.value = pair;
          checkbox.onclick = updateCriteria;
          des.appendChild(checkbox);

          var label = document.createElement('label')
          label.htmlFor = pair;
          label.appendChild(document.createTextNode(pair));
		  des.appendChild(label);
          des.appendChild(document.createElement("br"));
        }
      }

      updateCriteria();
      updateCriteria2();
    }

    function updateCriteria() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");

      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-A.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Good\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

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

        } else if (model == "Model-A.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Bad\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }

    function updateCriteria2() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");

      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-B.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Latest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.2") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "New\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Old\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.4") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Oldest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }
  <style>
    th,
    td {
      padding: 15px;
      font-weight: normal;
    }
  </style>
<!DOCTYPE html>
<html>
<body>

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

    <table>
      <tr>
        <th>
          <center> DESTINATION: </center></th>
        
        <th>
          <center> CRITERIA: </center></th>
        
        <th>
          <center> QTY: </center></th>
        
        <th>
          <center> CELL: </center></th>
        
      </tr>
      <tr>
        <td>
          <center>
            <div id = "destination" style = "width:230px; word-wrap: break-word"></div>
          </center>
          
        </td>
        <td>
          <center>
            <div id = "criteria" style = "width:350px; word-wrap: break-word"></div>
          </center>
          
        </td>
        <td>
          <center>
            <div id = "qty" required></div>
              
        </center></td>
        
        <td>
          <center>
            <div id = "cell" required></div>
        </center>      
        </td>
        
      </tr>
    </table>
    </div>
21.09.2018 04:44

Другие вопросы по теме

Вкладки JQuery не являются функцией
Ошибка, когда плейлист videojs пуст, и я пытаюсь заполнить его снова
JQuery: selectionStart возвращает undefined
Разница в коде javascript для .append () /. After () в IE и Chrome
Использование HTML-идентификатора для сравнения с переменной JS?
Javascript - функции jQuery не работают с клонированными
Как заставить работать в таблице, которая заполняется JS из JSON?
Обновление таблиц данных с помощью rows.add + aoColumnDefs?
Плагины WordPress не работают - JQuery показывает ошибки
Невозможно получить коллекцию элементов по имени класса с помощью JQuery

Похожие вопросы

Control Click в хроме разрывает фрейм моего сайта
Изменить цвет полосы прокрутки начальной загрузки - scrollspy?
Мангуст найти json внутри слоев json
Существуют ли в JavaScript какие-либо способы получить свойство объекта без использования записи через точку или скобку?
Формат даты mongoDB
Ошибка, когда плейлист videojs пуст, и я пытаюсь заполнить его снова
Рисование частичного круга с использованием дуг SVG
Как я могу обновить маркер Google Maps с информацией, предоставленной пользователем?
Размер агрегации MongoDB во вложенном поле
Оптимизировать поиск и вставить текст в файл gcode