获取选择值列表作为隐藏字段中分隔的管道并提交
Posted
技术标签:
【中文标题】获取选择值列表作为隐藏字段中分隔的管道并提交【英文标题】：Get list of select values as pipe delimited in hidden field and submit 【发布时间】：2018-02-25 21:57:50 【问题描述】：我有一个带有两个选择列表的网络表单，用户将他们想要的项目从一个选择框移动到另一个选择框，当用户点击“保存”按钮时，我想获取选择框中所有值的列表命名为“Two”并将它们输入到名为“TwoArray”的隐藏字段中，然后提交表单。我以为我可以使用 .map 来执行此操作，但我无法弄清楚，到目前为止的代码如下。注意：我想要名称为二的 Select 中的所有值的分隔列表，无论它们是否被“选中”。请帮忙！此示例中隐藏字段中的输出应为“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>
【问题讨论】：
【参考方案1】：尝试使用数组进行存储，然后使用$.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，因此您可以看到它的变化：
https://jsfiddle.net/kc66x5sr/
【讨论】：
以上是关于获取选择值列表作为隐藏字段中分隔的管道并提交的主要内容，如果未能解决你的问题，请参考以下文章