Question

我有这样的代码。

HTML：

<form>
    <ul class="sortable" id="sortable_list">
        <li id="1">whatever</li>
        <li id="2">you</li>
    </ul>

    <input type="hidden" id="hiddenval" value="111">
    <input type="hidden" id="hiddenval" value="222">
</form>

我想加入或获取可排序和输入字段的值。

jQuery的：

$('input#hiddenval').each(function() {
    cols.push($(this).val());                                       
});         


$('ul.sortable-list').each(function() {
    columns.push($(this).sortable('serialize'));
});

我希望看到这样的输出（提交表单时）：

sortable_list[0]=1&sortable_list[1]=2&hiddenval[0]=111&hiddenval[1]=222

Answer 1

没有很好的方法可以使用默认方法获取索引，因此您必须有点创意。

HTML

<form>
    <ul class="ui-sortable" id="sortable_list">
        <li id="1">whatever</li>
        <li id="2">me</li>
        <li id="3">you</li>
    </ul>
    <input type="hidden" name="hiddenval1" value="111">
    <input type="hidden" name="hiddenval2" value="222">
    <button class="serialize">Serialize</button>
</form>

我将输入字段id更改为name并使其唯一。你永远不应该拥有相同值的id，并且使用name make允许你使用预构建的jQuery serialize（）方法。

的jQuery

   $(document).ready(function () {
        $("#sortable_list").sortable();

        $('button').click(function (e) {
            e.preventDefault();

            // made this into an Array for easy looping
            var arraySerialized = $("#sortable_list").sortable("toArray");
            // build the string as we loop
            var listSerialized = '';
            for (var i = 0; i < arraySerialized.length; i++) {
                listSerialized += 'sortable_list[' + i + ']=' + arraySerialized[i] + '&';
            }

            // to make life easy!
            var formSerialized = $('form').serialize();

            // concatenate the two and return it
            return listSerialized + formSerialized;
        });

    });

在对可分类的李进行洗牌后，我得到了sortable_list[0]=3&sortable_list[1]=1&sortable_list[2]=2&hiddenval1=111&hiddenval2=222

JSFiddle for reference

希望这有帮助！

Answer 2

尝试

Fiddle

$('li').each(function(index){
columns.push($(this).attr('id'));
result=result+'sortable_list['+index+']='+$(this).attr('id')+'&';
});   
$( 'input.hiddenval').each(function(index){
cols.push($(this).val());
 if (index === total - 1) {
 result=result+'hiddenval['+index+']='+$(this).val();
}
else
{
result=result+'hiddenval['+index+']='+$(this).val()+'&';
}
});

jquery序列化可排序和输入表单

2 个答案:

HTML

的jQuery