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

Question

我有与此类似的多重选择功能(请参阅链接):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"] 将包含所有选项而不是仅包含所选/突出显示的选项吗？非常感谢您的任何回复。

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