javascript - jQuery 可选择序列化为数组

Question

我有一个可选的:

<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" value="1,3" />

其中 1,3 是所选项目的主体。我尝试过的任何来自网络的示例都失败了。请注意，只有选定的项目必须被捕获，如果我选择某个项目，然后取消选择，然后再次选择它应该只出现一次。如何实现？

Answer 1

以下假设正在使用 jQuery UI 可选插件

如果是这样，您可以尝试类似的方法并在此基础上进行构建

$(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