Question

我创建了一个表单，该表单根据用户的输入生成自定义句子。我想进行条件输入，从而导致对句子进行条件附加。如果用户选择“ Okay”（好）（id =“ z4”）作为车辆状况，我想要“为什么？” （id =“ z5”）下拉菜单出现。然后，他或她从“为什么？”中选择选项之一。添加到句子中的下拉菜单。

例如-

用户输入2012 Honda Civic，96,000，红色，良好。输出句子如下：待售的是 2012 Honda Civic ，里程为 96,000 。它以红色完成。它的形状良好。
用户输入2012 Honda Civic，96,000，红色，还可以，凹痕。输出句子如下：待售的是 2012 Honda Civic ，里程为 96,000 。它以红色完成。形状为好，因为它有一些凹痕。

有什么想法吗？

<!DOCTYPE html>
<html>

  <head>
	<title>Experiment</title>

	<style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
	</style>

	<script type="text/javascript">
  function sentence() {
    document.getElementById("s1").value = "";// reset
    document.getElementById("s1").style.display = "block";
    document.getElementById("r1").style.display = "block";
    if (document.getElementById("z1").value == "") {
      alert("Year, Make, and Model are needed");
      document.getElementById("z1").focus();
    } else if (document.getElementById("z2").value == "") {
      alert("Mileage is needed");
    } else if (document.getElementById("z3").value == "") {
      alert("Exterior color is needed");
    } else {
      const input1 = document.getElementById("z1").value;
      const input2 = document.getElementById("z2").value;
      const input3 = document.getElementById("z3").value;
      const input4 = document.getElementById("z4").value;

      document.getElementById("s1").value =
        "Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
        + input3 + ". It is in " + input4 + " shape.";

    }
  }

  function reset() {
    document.getElementById("s1").value = "";
  }

  function hide() {
    document.getElementById("s1").style.display = "none";
    document.getElementById("r1").style.display = "none";
  }
	</script>
  </head>

  <body onload="hide()">
    <table>
      <tr>
        <td> <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100"></td>
        <td> <input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100"></td>
        <td> <input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100"></td>
        <td> <select name="condition" id="z4"> <option value="" disabled selected>Condition</option> <option value="excellent">Excellent</option> <option value="good">Good</option> <option value="okay">Okay</option></select></td>
        <td> <select name="condition" id="z5"> <option value="" disabled selected>Why?</option> <option value="scratches">Scratches</option> <option value="dents">Dents</option> <option value="mechanical issues">Mechanical Issues</option></select></td>
    </table>
    <br>
    <div class="display">
      <button onclick="sentence()"> Submit </button>
    </div>
    <hr>
    <br>
    <textarea rows="10" cols="100" id="s1">

  </textarea>
    <br>

    <div class="display">
      <button onclick="reset()" id="r1">Reset</button>
    </div>

  </body>
</html>

有条件的表单下拉列表和输出

0 个答案: