Martijn Martijn - 1 year ago 139
jQuery Question

Howto serialize multiple Lists with Jquery

I have 3 sortable UL's and a simple jquery/javascript

<ul class="sortable" id="menu1">
<li id="id_1">whatever</li>
<li id="id_2">you</li>
<ul class="sortable" id="menu2">
<li id="id_3">wanne</li>
<li id="id_4">put</li>
<ul class="sortable" id="menu3">
<li id="id_5">in</li>
<li id="id_6">here</li>

$(function() {
connectWith: 'ul'

LI's are draggable between UL's
How can i serialize this so i get for example menu1[0]=1&menu1[1]=3
Or and array or whatever i can work with to save the state?

Answer Source



In your case use this:

$(function() {
        connectWith: '.sortable',
        update: function(event, ui) {
        var position = $('.sortable').serial();
        alert( position );

// this function make your UL LI a serialized object

(function($) {
    $.fn.serial = function() {
        var array = [];
        var $elem = $(this);
        $elem.each(function(i) {
            var menu =;
            $('li', this).each(function(e) {
                array.push(menu + '[' + e + ']=' +;
        return array.join('&');

that give you something like this:


that is representing the position order of each element

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download