Question

我有类似的多选功能（见链接）：http://jsfiddle.net/eUDRV/341/。

HTML code：

<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”]将包含所有选项而不是仅包含所选/突出显示的选项？非常感谢任何回复。

Answer 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']);

Answer 2

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

在表单标记中添加了一个ID：

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

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

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

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

2 个答案: