Aar*_*n O 5 html javascript php forms ajax
好吧，原来的请求似乎很混乱，所以让我尝试重新措辞。我有一个表单，请参阅下面的代码，有两个选择，用户将内容从可用位置列表（一）移动到选定位置列表（二）并输入一些其他字段（我包括一个文本字段作为示例），我需要能够查看第一个选择中的值（一）以及第二个列表中的值（二）
由于存在大量值，因此让用户仅单击或按住 Ctrl 键并单击他们想要的值是不切实际的。
<!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="1">Loc1</option>
<option value="2">Loc2</option>
<option value="3">Loc3</option>
</select>
<select id="Two" name="Two" multiple="multiple">
</select>
<br />
<input type="text" name="something" /><br />
<input type="hidden" name="form" value="1" />
<input type="button" id="leftall" value="<<" />
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<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>
这个问题很令人困惑，因为我们不确定您到底想在前端显示什么（HTML + Javascript），您想发送到后端（PHP）什么，以及您想插入什么/在数据库中更新/删除。
我想到的最简单的解决方案如下：
您的数据库中应该有 3 个表：users、locations 和 user_locations。user_locations 应至少有 2 列：“user_id”和“location_id”。
HTML：添加新的 html 输入隐藏：
<input type="hidden" id="two_values" name="two_values" value="" />
Javascript：当用户单击提交按钮时，获取第二个下拉列表的所有值，并将它们发送到服务器。就像这样：
<script>
$(document).ready(function() {
// on user clicks submit button, this code will be executed first
$('form').submit(function() {
// we'll take all values of the Two dropdown and put them in 1 string
var all_values = '';
$("#Two option").each(function() {
if(all_values === '') {
all_values += $(this).val();
} else {
all_values += ',' + $(this).val();
}
});
$('#two_values').val(all_values);
});
});
</script>
PHP：获取two_values，并将它们拆分为数组。
if(isset($_POST['form'])) {
$two_values_arr = explode(',', $_POST['two_values']);
// ...
}
PHP 和 MySQL：首先，删除所有先前用户的位置：
$q = 'DELETE FROM `locations` WHERE `user_id` = ' . $user_id;
// run the $q ..
然后，执行循环以插入该用户的每个值
foreach($two_values_arr as $location_id) {
$q = 'INSERT INTO `user_locations` (user_id, location_id) VALUES (' . $user_id . ', ' . $location_id . ')';
// run the $q ..
}
查看 HTML：当用户查看页面时，您应该获取所有用户的位置，用户拥有的位置应打印到“两个”下拉列表中，而他没有的位置应打印到“一个”下拉列表中