jQuery 和 Selectable 的多选

Question

我在 jQuery 上使用可选的多选时遇到问题。

我确实知道发生了什么。

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

非常感谢您的帮助！

我创建了这个JSFiddle

下面和JSFiddle一样。但是下面这个是行不通的。我不明白为什么。我必须粘贴下面的代码才能 post.

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

Answer 1

所以我现在明白问题出在哪里了。拼接数组时，下一个索引将被删除。所以因此each函数在拼接时不起作用

然后我试着把each倒着做，each的功能不会干扰next要拼接的。我发现这个超级漂亮干净的灵魂。

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

jQuery.fn.reverse = [].reverse;

然后像这样反过来使用

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

现在可以使用多选了。

jQuery 和 Selectable 的多选

Multiselect with jQuery and Selectable

javascript

jquery

jquery-ui-selectable