jQuery selectable serialize into an array

Question

I have a selectable:

<ol id="selectable">
    <li class="ui-widget-content">1</li>
    <li class="ui-widget-content">2</li>
    <li class="ui-widget-content">3</li>
</ol>

I want to capture every selected item body into a hidden input separated by a comma, so after selecting some items it would look for example like this:

 <input type="hidden" id="bad_times" name="bad_times" value="1,3" />

where 1,3 are bodies of the items selected. Any examples from the web I tried failed to work. Please note that only selected items have to be captured, if I select some item, then unselect, then select again it should appear only once. How to achieve it?

charlietfl · Accepted Answer · 2014-10-20 21:55:27Z

1

Following assumes that jQuery UI selectable plugin is being used

If so you can try something like this and build on it

$(function() {
  $("#selectable").selectable({
     filter: "li" ,
    unselected:mapSelected,
    selected:mapSelected
  });
});

function mapSelected(event,ui){
  var $selected = $(this).children('.ui-selected');
  var text = $.map($selected, function(el){
     return $(el).text()
  }).join();
  $('#bad_times').val(text)
}

DEMO

edited Oct 20, 2014 at 21:55

answered Oct 20, 2014 at 21:47

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maembe · Accepted Answer · 2014-10-20 21:37:18Z

1

What have you tried so far and where were you running into issues?

Based on the docs the selected items have the class 'ui-selected' So you should just be able to iterate over the selected items something like:

var str = "";
$( ".ui-selected").each(function(i) {
    if (i > 0)
        str += ",";
    str += $(this).text();
});

$('#bad_times').val(str);

answered Oct 20, 2014 at 21:37

maembe

1,3101 gold badge13 silver badges26 bronze badges

Comments

PeterKA · Accepted Answer · 2014-10-20 21:58:09Z

I would be in favor of using a data attribute, say, data-value and using an array, [1,3], instead of a list 1,3.

Special Note: The demo and code below simply help to verify the concept and do not use the selectable plugin.

HTML:

<input type="hidden" id="bad_times" name="bad_times" data-value="[]" />

JS:

$(function() {
  var hidden = $('#bad_times');
  $('#selectable li').on('click', function() {
      var val = +$(this).text();
      hidden.data()['value'].indexOf(val) > -1 || hidden.data()['value'].push(val);
      console.log( hidden.data()['value'] );
  });
});

$(function() {
  var hidden = $('#bad_times');
  $('#selectable li').on('click', function() {
      var val = +$(this).text();
      hidden.data()['value'].indexOf(val) > -1 || hidden.data()['value'].push(val);
      $('pre.out').text( JSON.stringify( hidden.data()['value'] ) );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="selectable">
    <li class="ui-widget-content">1</li>
    <li class="ui-widget-content">2</li>
    <li class="ui-widget-content">3</li>
</ol>
<input type="hidden" id="bad_times" name="bad_times" data-value="[]" />
<pre class="out"></pre>

Collectives™ on Stack Overflow

jQuery selectable serialize into an array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related