如何从html中的选择列表创建输出文本框
如何从html中的选择列表创建输出文本框
提问于 2018-07-16 00:28:59
这段代码的作用是输出一个带有我的一个选择选项的框，但我正在尝试使它适用于多个项目。
这个想法是，您将能够选择多个项目，一旦您按下‘添加项目到您的购物车’按钮，它将被放在文本框中的选择框下面。
<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>
回答 2
Stack Overflow用户
发布于 2018-07-16 00:45:59
更简单，只需在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%">
Stack Overflow用户
发布于 2018-07-16 00:48:29
尝试此更改功能。
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(",");
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51350148
复制相关文章
相似问题