Question

我想使用jquery将元素'（在本例中为图像）值输入到隐藏的表单中（在绿色div中）但是当它们再次被单击时，从表单输入中删除的值（当元素在蓝色div中时）。我怎么能这样做，有无限（动态）数量的元素值需要进入表单？为了示例，可以看到表单字段以查看是否输入了值。

DEMO jsFiddle

$(document).ready(function(){
    $("#bottom-div").on("click","img",function(){
        $(this).appendTo("#top-div");
    });
    $("#top-div").on("click","img",function(){
        $(this).appendTo("#bottom-div");
    });
});

Answer 1

您可以在提交表单时收集target-div的元素，并将它们作为JSON数组传递，形式如下：

$('form').on('submit', function() {
    //create an array
    values = [];
    //add all images in #top-div to the array
    $('#top-div img').each(function() {
        values.push($(this).attr('src'));
    });
    //set the JSON stringified array as the inputs value
    $('input[type=text]').val(JSON.stringify(values));
});

单击时使用jquery将元素值插入到表单中

1 个答案: