Question

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

Answer 1

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

然后我尝试向后执行每个功能，每个功能都不会干扰接下来的拼接。我发现这个超级漂亮和干净的灵魂。 https://stackoverflow.com/a/5386150/2950384

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

jQuery.fn.reverse = [].reverse;

然后像这样使用反向

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

现在多重选择有效。

使用jQuery和Selectable进行多选

1 个答案: