Multiselect with jQuery and Selectable

Question

I have problem with multiselect on jQuery with selectable.

I do have some idea of what is happening.

When splicing the items they get new index. This is what I believe is the problem. But I can't seem to find a solution.

Your help is much appreciated!

I created this JSFiddle

Here below is the same as JSFiddle. But this below does not work. I don't understand why. I had to paste the code below to be able to post.

The JSFiddle works though. So check that.

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>

score 0 · Accepted Answer · edited May 23 '17 at 12:25

So I now understand what the problem was. When splicing a array, the next index gets the one removed. So therefore the each function does not work when splicing.

I then tried to do the each backwards, the each function would not interfere with next to be spliced. I found this super nice and clean soultion. https://stackoverflow.com/a/5386150/2950384

Add this short jquery plugin code

jQuery.fn.reverse = [].reverse;

And use the reverse like this

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

And now the multiselect works.

Multiselect with jQuery and Selectable

1 Answers1