使用 jQuery 和 Selectable 进行多选答案

【问题标题】：Multiselect with jQuery and Selectable使用 jQuery 和 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>

【问题讨论】：

标签： javascript jquery jquery-ui-selectable

【解决方案1】：

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

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

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

jQuery.fn.reverse = [].reverse;

并像这样使用相反的

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

现在多选可以工作了。

【讨论】：