下拉多个值 - 如何在 Javascript 中处理？答案

【问题标题】：Drop down with multiple values - how to treat in Javascript?下拉多个值 - 如何在 Javascript 中处理？
【发布时间】：2018-07-15 18:14:13
【问题描述】：

我创建了几个输入和一个下拉菜单，将它们输入到 javascript 命令中以创建自定义句子。用户输入或选择的任何内容都会添加到句子框架中。当用户选择提交时，句子被创建。这很简单。我在从一个下拉菜单中添加多个输入到句子中时遇到了麻烦。

如果用户在下拉列表中选择“导航”和“usb 端口”，则只会将导航添加到句子中。如何更改我的代码，以便将下拉列表中的所有选择添加到句子中？例如，如果选择了“导航”和“usb 端口”，则句子将显示为：“它有这些选项：导航和 USB 端口。”

另外，请注意我使用的是 Chosen 插件。

非常感谢您的帮助。

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

【问题讨论】：

标签： javascript jquery html drop-down-menu jquery-chosen

【解决方案1】：

您需要循环选择以获取所有选择，例如

 const input1 = document.getElementById("z1").value;
      const input2 = document.getElementById("z2").value;
      const input3 = document.getElementById("z3").value;
      var input4 = '';

     for(var i=0; i< document.getElementById("z4").options.length; i++) {

        if(document.getElementById("z4").options[i].selected) {
            if(input4 === '') {
                input4 = document.getElementById("z4").options[i].value;
            } else {
                input4 += ' and ' + document.getElementById("z4").options[i].value;
            }
        }
  }

我在这里做了一个示例，其中包含使用 javascript 的基本 for 循环。你可以提高效率，但它展示了这个想法......

【讨论】：