X-Git-Url: http://wagnertech.de/git?a=blobdiff_plain;f=js%2Fjquery.multiselect2side.js;h=de74b64322f6ee307b6050878382ec24f6a37c03;hb=f4da9593b8f91ae5d57437ed124f9c9d859bc698;hp=6a357517ba0871ff20f6d47253e4b730486e2565;hpb=a8431990253f02664a71ce822c1b36f556a1efa6;p=kivitendo-erp.git

diff --git a/js/jquery.multiselect2side.js b/js/jquery.multiselect2side.js
index 6a357517b..de74b6432 100644
--- a/js/jquery.multiselect2side.js
+++ b/js/jquery.multiselect2side.js
@@ -1,276 +1,306 @@
-/*
- * multiselect2side jQuery plugin
- *
- * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
- *
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * http://www.senamion.com
- *
- */
-
-(function($) {
-  jQuery.fn.multiselect2side = function (o) {
-    o = $.extend({
-      selectedPosition: 'right',
-      moveOptions:      true,
-      labelTop:         'Top',
-      labelBottom:      'Bottom',
-      labelUp:          'Up',
-      labelDown:        'Down',
-      labelSort:        'Sort',
-      labelsx:          'Available',
-      labeldx:          'Selected',
-      maxSelected:      -1
-    }, o);
-
-    return this.each(function () {
-      var el = $(this);
-
-      var originalName = $(this).attr("name");
-      if (originalName.indexOf('[') != -1)
-        originalName = originalName.substring(0, originalName.indexOf('['));
-
-      var nameDx = originalName + "ms2side__dx";
-      var nameSx = originalName + "ms2side__sx";
-      var size   = $(this).attr("size");
-      // SIZE MIN
-      if (size < 6) {
-        $(this).attr("size", "6");
-        size = 6;
-      }
-
-      // UP AND DOWN
-      var divUpDown =
-        "<div class='ms2side__updown'>" +
-        "<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
-        "<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
-        "<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
-        "<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
-        "<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
-        "</div>";
-
-      // CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
-      var htmlToAdd =
-        "<div class='ms2side__div'>" +
-        ((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
-        "<div class='ms2side__select'>" +
-        (o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
-        "<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
-        "</div>" +
-        "<div class='ms2side__options'>" +
-        ((o.selectedPosition == 'right')
-         ?
-         ("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
-          "<p class='AddAll' title='Add All'>&raquo;</p>" +
-          "<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
-          "<p class='RemoveAll' title='Remove All'>&laquo;</p>")
-         :
-         ("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
-          "<p class='AddAll' title='Add All'>&laquo;</p>" +
-          "<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
-          "<p class='RemoveAll' title='Remove All'>&raquo;</p>")
-        ) +
-        "</div>" +
-        "<div class='ms2side__select'>" +
-        (o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
-        "<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + nameDx + "' size='" + size + "' multiple='multiple' ></select>" +
-        "</div>" +
-        ((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
-        "</div>";
-      $(this).after(htmlToAdd).hide();
-
-      // ELEMENTS
-      var allSel    = $(this).next().find("select");
-      var leftSel   = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
-      var rightSel  = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
-      // HEIGHT DIV
-      var heightDiv = $(".ms2side__select").eq(0).height();
-
-      // CENTER MOVE OPTIONS AND UPDOWN OPTIONS
-      $(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
-        var     top = ((heightDiv/2) - ($(this).height()/2));
-        if (top > 0)
-          $(this).css('padding-top',  top + 'px' );
-      });
-
-      // MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
-      $(this).find("option:selected").clone().appendTo(rightSel);
-      $(this).find("option:not(:selected)").clone().appendTo(leftSel);
-
-      // SELECT FIRST LEFT ITEM
-      if (!($.browser.msie && $.browser.version == '6.0'))
-        leftSel.find("option").eq(0).attr("selected", true);
-
-      // ON CHANGE REFRESH ALL BUTTON STATUS
-      allSel.change(function() {
-        var div        = $(this).parent().parent();
-        var selectSx   = leftSel.children();
-        var selectDx   = rightSel.children();
-        var selectedSx = leftSel.find("option:selected");
-        var selectedDx = rightSel.find("option:selected");
-
-        if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
-          div.find(".AddOne").addClass('ms2side__hide');
-        else
-          div.find(".AddOne").removeClass('ms2side__hide');
-
-        // FIRST HIDE ALL
-        div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
-        if (selectDx.size() > 1)
-          div.find(".SelSort").removeClass('ms2side__hide');
-        if (selectedDx.size() > 0) {
-          div.find(".RemoveOne").removeClass('ms2side__hide');
-          // ALL SELECTED - NO MOVE
-          if (selectedDx.size() < selectDx.size()) {    // FOR NOW (JOE) && selectedDx.size() == 1
-            if (selectedDx.val() != selectDx.val())     // FIRST OPTION, NO UP AND TOP BUTTON
-              div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
-            if (selectedDx.last().val() != selectDx.last().val())       // LAST OPTION, NO DOWN AND BOTTOM BUTTON
-              div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
-          }
-        }
-
-        if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
-          div.find(".AddAll").addClass('ms2side__hide');
-        else
-          div.find(".AddAll").removeClass('ms2side__hide');
-
-        if (selectDx.size() == 0)
-          div.find(".RemoveAll").addClass('ms2side__hide');
-        else
-          div.find(".RemoveAll").removeClass('ms2side__hide');
-      });
-
-      // DOUBLE CLICK ON LEFT SELECT OPTION
-      leftSel.dblclick(function () {
-        $(this).find("option:selected").each(function(i, selected){
-
-          if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
-            $(this).remove().appendTo(rightSel);
-            el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
-          }
-        });
-        $(this).trigger('change');
-      });
-
-      // DOUBLE CLICK ON RIGHT SELECT OPTION
-      rightSel.dblclick(function () {
-        $(this).find("option:selected").each(function(i, selected){
-          $(this).remove().appendTo(leftSel);
-          el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
-        });
-        $(this).trigger('change');
-      });
-
-      // CLICK ON OPTION
-      $(this).next().find('.ms2side__options').children().click(function () {
-        if (!$(this).hasClass("ms2side__hide")) {
-          if ($(this).hasClass("AddOne")) {
-            leftSel.find("option:selected").each(function(i, selected){
-              $(this).remove().appendTo(rightSel);
-              el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
-            });
-
-          } else if ($(this).hasClass("AddAll")) {        // ALL SELECTED
-            leftSel.children().appendTo(rightSel);
-            leftSel.children().remove();
-            el.find('option').attr("selected", true);
-            // el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
-
-          } else if ($(this).hasClass("RemoveOne")) {
-            rightSel.find("option:selected").each(function(i, selected){
-              $(this).remove().appendTo(leftSel);
-              el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
-            });
-
-          } else if ($(this).hasClass("RemoveAll")) {     // ALL REMOVED
-            rightSel.children().appendTo(leftSel);
-            rightSel.children().remove();
-            el.find('option').attr("selected", false);
-            //el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
-          }
-        }
-
-        leftSel.trigger('change');
-      });
-
-      // CLICK ON UP - DOWN
-      $(this).next().find('.ms2side__updown').children().click(function () {
-        var selectedDx = rightSel.find("option:selected");
-        var selectDx   = rightSel.find("option");
-
-        if (!$(this).hasClass("ms2side__hide")) {
-          if ($(this).hasClass("SelSort")) {
-            // SORT SELECTED ELEMENT
-            selectDx.sort(function(a, b) {
-              var compA = $(a).text().toUpperCase();
-              var compB = $(b).text().toUpperCase();
-              return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
-            })
-            // FIRST REMOVE FROM ORIGINAL SELECT
-            el.find("option:selected").remove();
-            // AFTER ADD ON ORIGINAL AND RIGHT SELECT
-            selectDx.each(function() {
-              rightSel.append($(this).clone().attr("selected", true));
-              el.append($(this).attr("selected", true));
-            });
-
-          } else if ($(this).hasClass("MoveUp")) {
-            var prev = selectedDx.first().prev();
-            var hPrev = el.find("[value=" + prev.val() + "]");
-
-            selectedDx.each(function() {
-              $(this).insertBefore(prev);
-              el.find("[value=" + $(this).val() + "]").insertBefore(hPrev);     // HIDDEN SELECT
-            });
-
-          } else if ($(this).hasClass("MoveDown")) {
-            var next = selectedDx.last().next();
-            var hNext = el.find("[value=" + next.val() + "]");
-
-            selectedDx.each(function() {
-              $(this).insertAfter(next);
-              el.find("[value=" + $(this).val() + "]").insertAfter(hNext);      // HIDDEN SELECT
-            });
-
-          } else if ($(this).hasClass("MoveTop")) {
-            var first = selectDx.first();
-            var hFirst = el.find("[value=" + first.val() + "]");
-
-            selectedDx.each(function() {
-              $(this).insertBefore(first);
-              el.find("[value=" + $(this).val() + "]").insertBefore(hFirst);    // HIDDEN SELECT
-            });
-
-          } else if ($(this).hasClass("MoveBottom")) {
-            var last = selectDx.last();
-            var hLast = el.find("[value=" + last.val() + "]");
-
-            selectedDx.each(function() {
-              last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
-              hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast);      // HIDDEN SELECT
-            });
-          }
-        }
-
-        leftSel.trigger('change');
-      });
-
-      // HOVER ON OPTION
-      $(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
-        function () {
-          $(this).addClass('ms2side_hover');
-        },
-        function () {
-          $(this).removeClass('ms2side_hover');
-        }
-      );
-
-      // UPDATE BUTTON ON START
-      leftSel.trigger('change');
-      // SHOW WHEN ALL READY
-      $(this).next().show();
-    });
-  };
-})(jQuery);
+/*
+ * multiselect2side jQuery plugin
+ *
+ * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
+ *
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://www.senamion.com
+ *
+ */
+
+(function($) {
+  jQuery.fn.multiselect2side = function (o) {
+    o = $.extend({
+      selectedPosition: 'right',
+      moveOptions:      true,
+      labelTop:         'Top',
+      labelBottom:      'Bottom',
+      labelUp:          'Up',
+      labelDown:        'Down',
+      labelSort:        'Sort',
+      labelsx:          'Available',
+      labeldx:          'Selected',
+      maxSelected:      -1,
+      leftSel:          null,
+      rightSel:         null,
+
+      sortOptions: function() {
+        o.leftSel.sortOptions();
+        o.rightSel.sortOptions();
+      }
+    }, o);
+
+    return this.each(function () {
+      var el = $(this);
+
+      var hiddenName = $(this).attr("name");
+      var originalID = $(this).attr("id");
+      if (!originalID)
+        originalID = hiddenName;
+      if (originalID.indexOf('[') != -1)
+        originalID = originalID.substring(0, originalID.indexOf('['));
+
+      var nameDx   = originalID + "ms2side__dx";
+      var idDx     = originalID + "ms2side__dx";
+      var nameSx   = originalID + "ms2side__sx";
+      var hiddenId = originalID + "ms2side_hidden";
+      var size     = $(this).attr("size");
+      $(this).attr("name", originalID + "ms2side__orig");
+      // SIZE MIN
+      if (size < 6) {
+        $(this).attr("size", "6");
+        size = 6;
+      }
+
+      // UP AND DOWN
+      var divUpDown =
+        "<div class='ms2side__updown'>" +
+        "<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
+        "<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
+        "<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
+        "<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
+        "<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
+        "</div>";
+
+      // CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
+      var htmlToAdd =
+        "<div class='ms2side__div'>" +
+        ((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
+        "<div class='ms2side__select'>" +
+        (o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
+        "<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
+        "</div>" +
+        "<div class='ms2side__options'>" +
+        ((o.selectedPosition == 'right')
+         ?
+         ("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
+          "<p class='AddAll' title='Add All'>&raquo;</p>" +
+          "<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
+          "<p class='RemoveAll' title='Remove All'>&laquo;</p>")
+         :
+         ("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
+          "<p class='AddAll' title='Add All'>&laquo;</p>" +
+          "<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
+          "<p class='RemoveAll' title='Remove All'>&raquo;</p>")
+        ) +
+        "</div>" +
+        "<div class='ms2side__select'>" +
+        (o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
+        "<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + idDx + "' size='" + size + "' multiple='multiple' ></select>" +
+        "</div>" +
+        "<span id=\"" + hiddenId + "\"></span>" +
+        ((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
+        "</div>";
+      $(this).after(htmlToAdd).hide();
+      $("#" + hiddenId).hide();
+
+      // ELEMENTS
+      var allSel    = $(this).next().find("select");
+      var leftSel   = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
+      var rightSel  = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
+      // HEIGHT DIV
+      var heightDiv = $(".ms2side__select").eq(0).height();
+      o.leftSel     = leftSel;
+      o.rightSel    = rightSel;
+
+      // CENTER MOVE OPTIONS AND UPDOWN OPTIONS
+      $(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
+        var     top = ((heightDiv/2) - ($(this).height()/2));
+        if (top > 0)
+          $(this).css('padding-top',  top + 'px' );
+      });
+
+      // MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
+      $(this).find("option:selected").clone().appendTo(rightSel);
+      $(this).find("option:not(:selected)").clone().appendTo(leftSel);
+
+      // Mark all unselected.
+      rightSel.find("option").attr("selected", false);
+
+      // ON CHANGE REFRESH ALL BUTTON STATUS
+      allSel.change(function() {
+        var div        = $(this).parent().parent();
+        var selectSx   = leftSel.children();
+        var selectDx   = rightSel.children();
+        var selectedSx = leftSel.find("option:selected");
+        var selectedDx = rightSel.find("option:selected");
+        var hiddenCont = $("#" + hiddenId);
+
+        if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
+          div.find(".AddOne").addClass('ms2side__hide');
+        else
+          div.find(".AddOne").removeClass('ms2side__hide');
+
+        // FIRST HIDE ALL
+        div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
+        // if (selectDx.size() > 1)
+          // div.find(".SelSort").removeClass('ms2side__hide');
+        if (selectedDx.size() > 0) {
+          div.find(".RemoveOne").removeClass('ms2side__hide');
+          // // ALL SELECTED - NO MOVE
+          // if (selectedDx.size() < selectDx.size()) {    // FOR NOW (JOE) && selectedDx.size() == 1
+          //   if (selectedDx.val() != selectDx.val())     // FIRST OPTION, NO UP AND TOP BUTTON
+          //     div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
+          //   if (selectedDx.last().val() != selectDx.last().val())       // LAST OPTION, NO DOWN AND BOTTOM BUTTON
+          //     div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
+          // }
+        }
+
+        if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
+          div.find(".AddAll").addClass('ms2side__hide');
+        else
+          div.find(".AddAll").removeClass('ms2side__hide');
+
+        if (selectDx.size() == 0)
+          div.find(".RemoveAll").addClass('ms2side__hide');
+        else
+          div.find(".RemoveAll").removeClass('ms2side__hide');
+
+        // Rebuild hidden inputs...
+        hiddenCont.empty();
+        rightSel.find("option").each(function(idx, option) {
+          $('<input type="hidden"/>').attr("name", hiddenName).attr("value", $(option).attr("value")).appendTo(hiddenCont);
+        });
+      });
+
+      // DOUBLE CLICK ON LEFT SELECT OPTION
+      leftSel.dblclick(function () {
+        $(this).find("option:selected").each(function(i, selected){
+
+          if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
+            $(this).remove().appendTo(rightSel);
+            el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
+          }
+        });
+        $(this).trigger('change');
+        o.sortOptions();
+      });
+
+      // DOUBLE CLICK ON RIGHT SELECT OPTION
+      rightSel.dblclick(function () {
+        $(this).find("option:selected").each(function(i, selected){
+          $(this).remove().appendTo(leftSel);
+          el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
+        });
+        $(this).trigger('change');
+        o.sortOptions();
+      });
+
+      // CLICK ON OPTION
+      $(this).next().find('.ms2side__options').children().click(function () {
+        if (!$(this).hasClass("ms2side__hide")) {
+          if ($(this).hasClass("AddOne")) {
+            leftSel.find("option:selected").each(function(i, selected){
+              $(this).remove().appendTo(rightSel);
+              el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
+            });
+            o.sortOptions();
+
+          } else if ($(this).hasClass("AddAll")) {        // ALL SELECTED
+            leftSel.children().appendTo(rightSel);
+            leftSel.children().remove();
+            el.find('option').attr("selected", true);
+            // el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
+            o.sortOptions();
+
+          } else if ($(this).hasClass("RemoveOne")) {
+            rightSel.find("option:selected").each(function(i, selected){
+              $(this).remove().appendTo(leftSel);
+              el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
+            });
+            o.sortOptions();
+
+          } else if ($(this).hasClass("RemoveAll")) {     // ALL REMOVED
+            rightSel.children().appendTo(leftSel);
+            rightSel.children().remove();
+            el.find('option').attr("selected", false);
+            //el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
+            o.sortOptions();
+          }
+        }
+
+        leftSel.trigger('change');
+      });
+
+      // CLICK ON UP - DOWN
+      $(this).next().find('.ms2side__updown').children().click(function () {
+        var selectedDx = rightSel.find("option:selected");
+        var selectDx   = rightSel.find("option");
+
+        if (!$(this).hasClass("ms2side__hide")) {
+          if ($(this).hasClass("SelSort")) {
+            // SORT SELECTED ELEMENT
+            selectDx.sort(function(a, b) {
+              var compA = $(a).text().toUpperCase();
+              var compB = $(b).text().toUpperCase();
+              return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
+            })
+            // FIRST REMOVE FROM ORIGINAL SELECT
+            el.find("option:selected").remove();
+            // AFTER ADD ON ORIGINAL AND RIGHT SELECT
+            selectDx.each(function() {
+              rightSel.append($(this).clone().attr("selected", true));
+              el.append($(this).attr("selected", true));
+            });
+
+          } else if ($(this).hasClass("MoveUp")) {
+            var prev = selectedDx.first().prev();
+            var hPrev = el.find("[value=" + prev.val() + "]");
+
+            selectedDx.each(function() {
+              $(this).insertBefore(prev);
+              el.find("[value=" + $(this).val() + "]").insertBefore(hPrev);     // HIDDEN SELECT
+            });
+
+          } else if ($(this).hasClass("MoveDown")) {
+            var next = selectedDx.last().next();
+            var hNext = el.find("[value=" + next.val() + "]");
+
+            selectedDx.each(function() {
+              $(this).insertAfter(next);
+              el.find("[value=" + $(this).val() + "]").insertAfter(hNext);      // HIDDEN SELECT
+            });
+
+          } else if ($(this).hasClass("MoveTop")) {
+            var first = selectDx.first();
+            var hFirst = el.find("[value=" + first.val() + "]");
+
+            selectedDx.each(function() {
+              $(this).insertBefore(first);
+              el.find("[value=" + $(this).val() + "]").insertBefore(hFirst);    // HIDDEN SELECT
+            });
+
+          } else if ($(this).hasClass("MoveBottom")) {
+            var last = selectDx.last();
+            var hLast = el.find("[value=" + last.val() + "]");
+
+            selectedDx.each(function() {
+              last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
+              hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast);      // HIDDEN SELECT
+            });
+          }
+        }
+
+        leftSel.trigger('change');
+      });
+
+      // HOVER ON OPTION
+      $(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
+        function () {
+          $(this).addClass('ms2side_hover');
+        },
+        function () {
+          $(this).removeClass('ms2side_hover');
+        }
+      );
+
+      // UPDATE BUTTON ON START
+      leftSel.trigger('change');
+      o.sortOptions();
+      // SHOW WHEN ALL READY
+      $(this).next().show();
+    });
+  };
+})(jQuery);