条件 jQuery 字符串

Question

我创建了几个输入和一个下拉菜单，将其输入 JavaScript 命令以创建自定义句子。无论用户输入或选择什么，都会添加到句子框架中。当用户选择提交时，将创建句子。这很简单。我运行无法将一个下拉列表中的多个输入添加到句子中。

如果用户在下拉列表中选择 "navigation" 除了 "usb ports"，它在句子中的格式为："It has these options: navigation, aux." 同样，如果选择了三个选项，它的格式为: " 它有这些选项：导航、aux、usb 端口。"

如何编辑代码，以便在选择两个选项时 "and" 将它们分开。 "It has these options: navigation and aux." 此外，如果选择了三个或更多选项，则 "and" 将出现在最后一个值之前。 "It has these options: navigation, aux, and usb ports."

<!DOCTYPE html>
<html>
<head>
  <title>Hi</title>
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
  <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" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(".chosen-select").chosen({
        disable_search_threshold: 4
      });
    })
  </script>
  <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;
        var input4 = $('#z4').val();

        document.getElementById("s1").value =
          "Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in " +
          input3 + ". It has these options: " + input4 + "."
      }
    }

    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 data-placeholder="Options" name="options" id="z4" multiple class="chosen-select">
          <option value=""></option>
          <option value=" navigation">Navigation</option>
          <option value=" aux">Aux</option>
          <option value=" usb ports">USB Ports</option>
          <option value=" heated seats">Heated Seats</option>
        </select>
      </td>
    </tr>
    <tr>
  </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>

Answer 1

input4是Chosen提供的数组

您只需遍历该数组中的值并执行您喜欢的操作...比如在最后一个值之前添加逗号和 "and"。

<!DOCTYPE html>
<html>

  <head>
 <title>Hi</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

 <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" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

 <script type="text/javascript">

  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    });
  })
  </script>

  <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;
      var input4 = $('#z4').val();
      
      // =======================================
      console.log(input4);  // It is an array.
      
      var input4Formatted = "";
      if(input4.length==1){
        // Only one value...
        input4Formatted = input4[0];
      }
      if(input4.length==2){
        // Two values... Just add and "and"
        input4Formatted = input4[0]+" and"+input4[1];
      }
      if(input4.length>2){
        // more than 2 values...
        for(i=0;i<input4.length-1;i++){
          input4Formatted += input4[i]+",";
        }
        input4Formatted += " and"+input4[input4.length-1];
      }
      // =======================================
      
      document.getElementById("s1").value =
        "Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
        + input3 + ". It has these options: " +input4Formatted+ "."

    }
  }

  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 data-placeholder="Options" name="options" id="z4"  multiple class="chosen-select">
            <option value=""></option>
            <option value=" navigation">Navigation</option>
            <option value=" aux">Aux</option>
            <option value=" usb ports">USB Ports</option>
            <option value=" heated seats">Heated Seats</option>
          </select>
        </td>
      </tr>
      <tr>
    </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>

条件 jQuery 字符串

Conditional jQuery string

html

jquery

jquery-chosen

drop-down-menu