Comment obtenir des données de JQuery Selectable?

Question

J'utilise Symfony2 Framework, et c'est ce que je veux faire:

Je veux changer la valeur d'un type d'entrée, mais je veux que la valeur soit ce que je viens de sélectionner avec le selectable.

Dans l'exemple de jquery.com j'ai les champs sélectionnés, mais je dois l'avoir sur un champ caché afin que je puisse l'envoyer à un contrôleur sous forme de données de formulaire.

J'ai lu l'exemple dans la documentation de JQuery mais j'ai de la difficulté à le changer.

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

    }); 
}); 

et j'ai ce champ caché

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

Je souhaite modifier la valeur du champ d'entrée, par exemple, quelque chose comme:

Vous avez sélectionné

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

Answer 1

Quelque chose comme ceci: jsFiddle exemple . Cela va définir la valeur du champ caché pour vos éléments sélectionnés et à des fins de démonstration, les montrer dans une alerte.

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

Il est simple. Vous pouvez utiliser javascript pour obtenir les données de la liste.

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

}); 

});