可选择序列化 jQuery UI::如何显示 html 标记中的内容而不是索引值

Selectable Serialize jQuery UI:: How to display the content within the html tag instead of the index value?

本文关键字：索引值 UI jQuery 序列化 何显示 可选择 显示 html      更新时间：2023-09-26

我是jquery的新手，我正在使用jQuery UI中的"可选，序列化"交互。

交互显示用户已选择的索引值，

但我想知道如何显示用户选择的内容，而不是显示索引值。

所以实际上它是这样的

脚本：：

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

.HTML：：

<ol id="selectable">
  <li class="ui-widget-content">Watermelon</li>
  <li class="ui-widget-content">Orange</li>
  <li class="ui-widget-content">Guava</li>
  <li class="ui-widget-content">Apple</li>
  <li class="ui-widget-content">Banana</li>
 </ol>

显示的结果是"您已选择：#1"。

但我希望结果显示为"您已选择：西瓜"

提前谢谢。:) 

$( "#selectable" ).selectable({
  stop: function() {
    var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
      var index = $( "#selectable li" ).index( this );
      //this is set by jQuery to be the current item in the each iteration
      //so wrap this in the $.jQuery object and then you will be able to call the jQuery method
      //text() to get the text value
      result.append( " " + $(this).text());
    });
  }
});
相关文章：