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

到目前为止，你有什么尝试？在哪里遇到问题？

根据文档，所选项目具有“ui-selected”类别。因此，您应该能够迭代选定的项目，如：

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

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

Answer 2

以下假设正在使用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

Answer 3

我赞成使用数据属性，例如data-value并使用数组[1,3]，而不是列表1,3。

特别提示：下面的演示和代码只是帮助验证概念而不使用selectable插件。

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'] );
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery selectable序列化为一个数组

3 个答案: