如何从Jquery UI Selectable获取值

Question

I have a question regarding the Jquery US Selectable I have already looked at this post and I still cant figure out the problem: How to get the value from jQuery UI selectable in php I would like to get all the values I selected from the list (not the indexes but the values!!) into a array and than send it to PHP (via POST method). I have prepared a fiddle here

I have to select the values and not the indexes. Example of the list:

<ol id="selectable">
  <li class="ui-widget-content" value='1'>Item 1</li>
  <li class="ui-widget-content" value='2'>Item 2</li>
  <li class="ui-widget-content" value='3'>Item 3</li>
  <li class="ui-widget-content" value='4'>Item 4</li>
  <li class="ui-widget-content" value='5'>Item 5</li>
  <li class="ui-widget-content" value='6'>Item 6</li>
  <li class="ui-widget-content" value='7'>Item 7</li>
</ol>

From this list I have to select the values. The code below only gets the index of the list. I would like to know how to select the values and send the values to the same file ('index.php'). Than if the array is set I can afterwards manipulate with the data.

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

Thank you for your help in advance. I'd really like to know how to get the values to an array and send it to the php file.

Answer 1

You can get the element reference from this inside the stop function. Based on that, you can access the value attribute using .attr() . Example:

Code:

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

Demo: http://jsfiddle.net/GCu2D/2068/

You can use the result's value in whatever way you want. You can use ajax to pass these to the PHP backend

Answer 2

$(".ui-selected", this).each(function () {

    // this works for me
    result.append("<li>" + $(this).text() + "</li>");
});

I hope that works out :-)