使用 jQuery 和 Selectable 进行多选

Posted 2023-05-07

【中文标题】使用 jQuery 和 Selectable 进行多选

【英文标题】：Multiselect with jQuery and Selectable

【发布时间】：2017-08-06 17:16:33

【问题描述】：

我在 jQuery 上使用可选择的多选存在问题。

我确实对正在发生的事情有所了解。

当拼接项目时，他们得到新的索引。这就是我认为的问题所在。但我似乎找不到解决方案。

非常感谢您的帮助！

我创建了这个JSFiddle

这里和 JSFiddle 一样。但这下面不起作用。我不明白为什么。我必须粘贴下面的代码才能发布。

JSFiddle 可以工作。所以检查一下。

var arrSelectedItems = [];
var arrItems = [];


$("#showItems").click(function() 
  arrItems.push([1, "Mr", "John", "Andersson"]);
  arrItems.push([2, "Mrs", "Anna", "Svensson"]);
  arrItems.push([3, "Mr", "Klas", "Olsson"]);
  arrItems.push([4, "Mrs", "Lovisa", "Henriksson"]);
  arrItems.push([5, "Mr", "Anders", "Annikadotter"]);
  arrItems.push([6, "Mrs", "Klara", "Annasson"]);
  showItems();
);

function showItems() 
  $('#selectable').empty();
  $(arrItems).each(function(i) 
    var stringItems = arrItems[i].toString().split(",");
    $('#selectable').append("<li class=\"ui-widget-content\" value='" + i + "'>" + stringItems[1] + " &nbsp; " + stringItems[2] + "  " + stringItems[3] + "</li>").attr("class", "ui-widget-content");
  );


function showSelectedItems() 
  $('#selected').empty();
  $(arrSelectedItems).each(function(i) 
    var stringItem = arrSelectedItems[i].toString().split(",");
    $('#selected').append("<li class=\"ui-widget-content\" value='" + i + "'>" + stringItem[2] + " &nbsp; " + stringItem[3] + "  " + stringItem[1] + "</li>");
  );


$(function() 
  $("#selectable").selectable(
    stop: function() 
      $(".ui-selected", this).each(function() 
        var $this = $(this);
        var index = $this.attr("value");
        var pushString = arrItems[index];
        arrSelectedItems.push(pushString);
        arrSelectedItems.sort();
        arrItems.splice(index, 1);
        arrItems.sort();
        showItems();
        showSelectedItems();
      );
    
  );
);

$(function() 
  $("#selected").selectable(
    stop: function() 
      $(".ui-selected", this).each(function() 
        var $this = $(this);
        var index = $this.attr("value");
        var pushString = arrSelectedItems[index];
        arrItems.push(pushString);
        arrItems.sort();
        arrSelectedItems.splice(index, 1);
        arrSelectedItems.sort();
        showItems();
        showSelectedItems();
      );

    
  );
);

#selectable .ui-selecting 
  background: #FECA40;


#selectable .ui-selected 
  background: #F39814;
  color: white;


#selectable 
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;


#selectable li 
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;


#selected .ui-selecting 
  background: #FECA40;


#selected .ui-selected 
  background: #F39814;
  color: white;


#selected 
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;


#selected li 
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<input type="button" id="showItems" name="showItems" value="Show items">
<ol id="selectable" class="ui-selectable" style="background:#84ac38; border: 1px solid #267501;">
</ol>
<ol id="selected" class="ui-widget-content" style="background:#e9b91c ;border: 1px solid #ce7b12;>
			
		</ol>

【参考方案1】：

所以我现在明白问题所在了。拼接数组时，下一个索引会被删除。所以拼接时每个函数都不起作用。

然后我尝试将 each 向后做，每个功能不会干扰下一个要拼接的功能。我发现这个超级干净的灵魂。 https://***.com/a/5386150/2950384

添加这个简短的 jquery 插件代码

jQuery.fn.reverse = [].reverse;

并像这样使用相反的

stop: function() 
            $(".ui-selected", this ).reverse().each(function() 
              var $this = $(this);

现在多选可以工作了。