Question

此代码可用于输出带有我的选择选项之一的框，但我正在尝试使其可用于多个项目。

这个想法是，您将能够选择多个项目，并且一旦按下“将项目添加到购物车”按钮，它将被放置在文本框中选择框的下方。

<html>
<head>
  <link rel="stylesheet" href="hello.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h5>Grocery Categories</h5>
    <select name="products" size="6" multiple>
      <option id="bread">Bread</option>
      <option id="dairy">Dairy</option>
      <option id="frozen">Frozen</option>
      <option id="snacks">Snacks</option>
      <option id="veggies">Vegetables</option>
    </select>
  </div><br><br>
  <div class="container">
    <button onClick="outputCart()">Add item to your cart</button><br><br>
    <input id="cart" type="textbox" name="output" cols="30%" row="30%">
    </input>
  </div>
  <script language="javascript">
    function outputCart() {
      var i = 0;
      var out = document.getElementsByName('products')[i].value;
      document.getElementsByName('output')[i].value = out;
    }
  </script>
</body>
</html>

Answer 1

香草JavaScript：

遍历option元素的选定select，将选定的选项存储在array中，然后通过Array.join()显示array：< / p>

function outputCart() {
  var select = document.getElementsByName('products')[0];
  var options = select && select.options;
  var results = [];

  for (var i = 0, len = options.length, option; i < len; i++) {
    option = options[i];

    if (option.selected) {
      results.push(option.value || option.text);
    }
  }

  var out = document.getElementsByName('output')[0];
  out.value = results.join(', ');
}

<div class="container">
  <h5>Grocery Categories</h5>
  <select name="products" size="6" multiple>
    <option id="bread">Bread</option>
    <option id="dairy">Dairy</option>
    <option id="frozen">Frozen</option>
    <option id="snacks">Snacks</option>
    <option id="veggies">Vegetables</option>
  </select>
  <div class="container">
    <button onClick="outputCart()">Add item to your cart</button><br><br>
    <input id="cart" type="textbox" name="output" cols="30%" row="30%">
  </div>
</div>

jQuery：

选择通过:selected选择器选择的option，然后通过.map获取值，并使用.get将结果存储为{{1 }}，然后array：

join

function outputCart(){
  var element = $('[name="products"]');
  var selected = element.find('option:selected');
  var result = selected
    .map(function(index, option) { return $(option).val(); })
    .get();
  
  $('#cart').val(result.join(', '));
}

Answer 2

简单的方法就是将它与jQuery一起使用（因为您已经导入了它）

function outputCart(){
  var arr = $("option:selected").map(function(){ return this.value }).get().join(", ");
  $('#cart').val(arr); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

       <h5>Grocery Categories</h5>
          <select name="products" size="6" multiple>
          <option id="bread">Bread</option>
          <option id="dairy">Dairy</option>
          <option id="frozen">Frozen</option>
          <option id="snacks">Snacks</option>
          <option id="veggies">Vegetables</option>
         </select>  
    
       <button onClick="outputCart()">Add item to your cart</button><br><br>
       <input id="cart" type="textbox" name="output" cols="30%" row="30%">

Answer 3

尝试此更改功能。

function outputCart(){
   var i = 0;
   var selectItems = document.getElementsByName('products')[i].selectedOptions; 
   var out = [];
   for(let options of selectItems){
		out.push(options.value);
   }
   document.getElementsByName('output')[i].value= out.join(",");
}

如何从html中的选择列表创建输出文本框

3 个答案:

香草JavaScript：

jQuery：