Как получить данные из JQuery Selectable? - PullRequest
Новая
       43

Как получить данные из JQuery Selectable?

0 голосов
/ 02 марта 2012

Я использую Symfony2 Framework, и это то, что я хочу сделать:

Я хочу изменить значение типа ввода, но я хочу, чтобы это значение было тем, которое я только что выбрал с помощью selectable,

В примере на jquery.com у меня есть выбранные поля, но мне нужно, чтобы оно было в скрытом поле, чтобы я мог отправить его на контроллер в виде данных формы.

I 'Я прочитал пример в документации JQuery, но у меня возникают проблемы при его изменении. 

$(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 ) );          
            });
         }

    });
});

, и у меня есть это скрытое поле 

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

Я хочу изменить значение вводаполе, например, что-то вроде:

Вы выбрали 

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

Ответы [ 2 ]

1 голос
/ 12 марта 2014

Все просто. Вы можете использовать JavaScript, чтобы получить данные списка. 

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

});

});

1 голос
/ 03 марта 2012

Примерно так: jsFiddle пример. Это установит значение скрытого поля для выбранных вами элементов и в демонстрационных целях отобразит их в предупреждении.

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>

1017 *

...