javascript- if / else，用于switch语句中的语句

时间：2018-09-21 01:58:49

标签： javascript jquery html css switch-statement

我正在使用请求门户，并且这些动态复选框，标签和文本框均取决于选项列表。

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

1 个答案:

答案 0 :(得分：0)

我已经修改了您的代码，请尝试以下操作：

 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>

相关问题
最新问题