如何将所有多选选项输入数据库答案

【问题标题】：How to enter all multi-selection options into database如何将所有多选选项输入数据库
【发布时间】：2014-01-31 23:32:07
【问题描述】：

我有与此类似的多选功能（请参阅链接）：http://jsfiddle.net/eUDRV/341/。

HTML 代码：

<section class="container" >
<div>
    <select id="list" name="list"size="15">
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
    </select>
</div>
<div>
<br><br><br>
    <input type="button" id="button_left" value="<--"/>

    <input type="button" id="button_right" value="-->" />
</div>
<div>
    <select id="selected_values" size="15"></select>
    <input name="selected_values" type="hidden"/>
</div>

jQuery/Javascript 代码：

$(document).ready(function () {

$("#button_right").click(function () {
var selectedItem = $("#list option:selected");
var added = false;

$("#selected_values > option").each(function() {

    if ($(this).text() > $(selectedItem).text()) {

        $(selectedItem).insertBefore($(this));

        added = true;

        return false;
    }
});
if(!added) $(selectedItem).appendTo($("#selected_values"));
updateHiddenField();
});


$("#button_left").click(function () {
var selectedItem = $("#selected_values option:selected"), activeValues;
var added = false;

$("#list > option").each(function() {

    if ($(this).text() > $(selectedItem).text()) {

        $(selectedItem).insertBefore($(this));

        added = true;

        return false;
    }
});
if(!added) $(selectedItem).appendTo($("#list"));

updateHiddenField();
});

function updateHiddenField () {
$('input[name="selected_values"]').val(
    $.map($('#selected_values option:selected').toArray(), function (e) {
    return e.value;
})
);
}
});

PHP 代码：

if(!empty($_POST['selected_values'])) {
$_POST['selected_values'] = explode(',', $_POST['selected_values']);
foreach($_POST['selected_values'] as $x) {
$query = "INSERT INTO $table (id1, id2) VALUES ($id1Value, $x)";
db_query($query);

我的目标是遍历所有移入左列的值，并使用 PHP 将它们输入数据库。我能够使此功能正常工作，但是，我遇到了与此处引用的完全相同的问题：how can I get all options in a multi-options select using PHP?。我正在使用 $_POST["leftValues"] 访问这些值，但是如果用户单击其中一个选项，则只有该选项会被输入到数据库中。不幸的是，公认的解决方案对我不起作用。

$("form:has(#leftValues)").on('submit', function () {
$("#leftValues option").prop('selected', true);
});

有人可以向我解释如何让这个解决方案为我工作，或者另一种方法来确保 $_POST["leftValues"] 将包含所有选项，而不仅仅是选定/突出显示的选项？非常感谢任何回应。

【问题讨论】：

标签： javascript php jquery

【解决方案1】：

您可以添加一个隐藏字段并在列表更改时对其进行更新。

您需要更新您的 html：

<div>
    <select id="leftValues" size="5" multiple></select>
    <input name="leftValues" type="hidden" />
</div>

并添加一个函数来进行更新：

function updateHiddenField () {
    $('input[name="leftValues[]"]').val(
        $.map($('#leftValues option:selected').toArray(), function (e) {
            return e.value;
        })    
    );
}

并在每个点击处理程序中调用它：

$("#btnLeft").click(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
    updateHiddenField();
});

$("#btnRight").click(function () {
    var selectedItem = $("#leftValues option:selected"), activeValues;
    $("#rightValues").append(selectedItem);
    updateHiddenField();
});

最后，您可以在您的 PHP 中执行此操作以获得您最初期望的结果：

$_POST['leftValues'] = explode(',', $_POST['leftValues']);

【讨论】：

感谢您的回复。不幸的是，由于某种原因，这对我也不起作用。
我认为这是正确的想法，但却是错误的事件。似乎在mousedown 上为我工作。
会起作用，但是用户将如何取下其中一件物品。
@PatrickEvans 好点...也许更好的解决方案是跟踪隐藏字段中的选定项目。我会相应地更新我的答案。
我不确定问题出在哪里，但没有一个解决方案适合我。

【解决方案2】：

终于搞定了。我按照原始解决方案的建议编辑了提交回调。

在我的表单标签中添加了一个 id：

<form id="form" method="post">

提交表单时，选择/突出显示 selected_values 列表中的所有选项：

$(#form).submit(function () { 
    $("#selected_values > option").each(function () {
        $(this).attr('selected', 'selected');
});
return true;
});

【讨论】：