我有一个带有两个选择列表的网络表单，用户将他们想要的项目从一个选择框移动到另一个选择框，当用户点击“保存”按钮时我想获得选择框中所有值的列表命名为“Two”并将它们输入到名为“TwoArray”的隐藏字段中，然后提交表单。我以为我可以使用 .map 来执行此操作，但我一直无法弄清楚，到目前为止的代码如下。注意:我想要一个带分隔符的列表，其中包含名称为“二”的“选择”中的所有值，无论它们是否被“选中”。请帮忙!本例中隐藏域的输出应该是“103,109”
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test for P1727410</title>
<script src="/ref-files/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
function moveAllItems(origin, dest) {
$(origin).children().appendTo(dest);
}
$('#left').click(function () {
moveItems('#Two', '#One');
});
$('#right').on('click', function () {
moveItems('#One', '#Two');
});
$('#leftall').on('click', function () {
moveAllItems('#Two', '#One');
});
$('#rightall').on('click', function () {
moveAllItems('#One', '#Two');
});
});
</script>
</head>
<body>
<h2>Test for P1727410</h2>
Available Locations | Selected Locations
<form method="POST" action="#">
<select id="One" name="One" multiple="multiple">
<option value="100">Loc1</option>
<option value="101">Loc2</option>
<option value="102">Loc3</option>
</select>
<select id="Two" name="Two" multiple="multiple">
<option value="103">Loc4</option>
<option value="109">Loc10</option>
</select>
<br />
<input type="text" name="something" /><br />
<input type="hidden" name="form" value="1" />
<input type="hidden" name="TwoArray" value="" />
<input type="button" id="leftall" value="<<" />
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<input type="button" id="update" value="Save" />
<br />
<input type="Submit" name="Submit" value="Submit" />
</form>
<p>
<?php
if(isset($_POST['form'])) {
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
</p>
</body>
</html>
最佳答案
尝试使用数组进行存储，然后使用 $.each() 遍历捕获选项值的子项。我把这个函数放在 JavaScript 的最底部，在所有其他监听器下面:
// Listen for an input click (you can listen for whatever)
$('input').on('click',function(e) {
// Set an array
var getAllVals = [];
// Loop through this select's options (children)
$.each($('#Two').children(),function(k,v) {
// Store the "value" attribute values
getAllVals.push($(v).attr('value'));
});
// Place the imploded array into the field
$('input[name=TwoArray]').val(getAllVals.join(','));
});
这是一个 jsFiddle 演示，输入为 text，因此您可以看到它的变化:
关于javascript - 获取选择值列表作为隐藏字段中分隔的竖线并提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46261071/