How to get data from JQuery Selectable?

Question

I'm using Symfony2 Framework, and this is what I want to do:

I want to change the value of an input type, but I want the value to be what I just selected with the selectable.

In the example at jquery.com I have the selected fields, but I need to have it on a hidden field so I could send it to a controller as a form data.

I've read the example in the JQuery Documentation but I'm having troubles changing it.

$(function() {
    $( "#selectable" ).selectable({
        stop: function() {
            var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
            var index = $( "#selectable li" ).index( this );
            result.append( " #" + ( index + 1 ) );          
            });
         }

    });
});

and I have this hidden field

<input name="horario" type="hidden" value=" " />

I want to change the value of the input field, for example, something like:

You have selected

#1 #2 #3 #4 #5 #6 #7 #8 #9 #10 #16 #17 #18 #19 #20 #21 #22 #23.

Answer 1

Something like this: jsFiddle example. This will set the hidden field value to your selected items and for demo purposes, show them in an alert.

jQuery

$("#selectable").selectable({
    stop: function() {
        var items = '';
        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function() {
            var index = $("#selectable li").index(this);
            items += (" #" + (index + 1));
        });
        alert('You have selected: ' + items);
        $('input[name="horario"]').val(items);
    }
});​

HTML

<input name="horario" type="hidden" value=" " />
<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

​

Answer 2

It's Simple. You can use javascript to get the list data.

$(function() {
  $( "#selectable" ).selectable({
    stop: function() {
        var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
        var value = this.innerHTML;
        result.append(value+" , ");          
        });
     }

});

});