2 * multiselect2side jQuery plugin
4 * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
6 * Dual licensed under the MIT (MIT-LICENSE.txt)
7 * and GPL (GPL-LICENSE.txt) licenses.
9 * http://www.senamion.com
14 jQuery.fn.multiselect2side = function (o) {
16 selectedPosition: 'right',
19 labelBottom: 'Bottom',
28 return this.each(function () {
31 var originalName = $(this).attr("name");
32 if (originalName.indexOf('[') != -1)
33 originalName = originalName.substring(0, originalName.indexOf('['));
35 var nameDx = $(this).attr("name");
36 var idDx = originalName + "ms2side__dx";
37 var nameSx = originalName + "ms2side__sx";
38 var size = $(this).attr("size");
39 $(this).attr("name", originalName + "ms2side__orig");
42 $(this).attr("size", "6");
48 "<div class='ms2side__updown'>" +
49 "<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
50 "<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
51 "<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
52 "<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
53 "<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
56 // CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
58 "<div class='ms2side__div'>" +
59 ((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
60 "<div class='ms2side__select'>" +
61 (o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
62 "<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
64 "<div class='ms2side__options'>" +
65 ((o.selectedPosition == 'right')
67 ("<p class='AddOne' title='Add Selected'>›</p>" +
68 "<p class='AddAll' title='Add All'>»</p>" +
69 "<p class='RemoveOne' title='Remove Selected'>‹</p>" +
70 "<p class='RemoveAll' title='Remove All'>«</p>")
72 ("<p class='AddOne' title='Add Selected'>‹</p>" +
73 "<p class='AddAll' title='Add All'>«</p>" +
74 "<p class='RemoveOne' title='Remove Selected'>›</p>" +
75 "<p class='RemoveAll' title='Remove All'>»</p>")
78 "<div class='ms2side__select'>" +
79 (o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
80 "<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + idDx + "' size='" + size + "' multiple='multiple' ></select>" +
82 ((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
84 $(this).after(htmlToAdd).hide();
87 var allSel = $(this).next().find("select");
88 var leftSel = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
89 var rightSel = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
91 var heightDiv = $(".ms2side__select").eq(0).height();
93 // CENTER MOVE OPTIONS AND UPDOWN OPTIONS
94 $(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
95 var top = ((heightDiv/2) - ($(this).height()/2));
97 $(this).css('padding-top', top + 'px' );
100 // MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
101 $(this).find("option:selected").clone().appendTo(rightSel);
102 $(this).find("option:not(:selected)").clone().appendTo(leftSel);
104 // Mark all unselected.
105 rightSel.find("option").attr("selected", false);
107 // ON CHANGE REFRESH ALL BUTTON STATUS
108 allSel.change(function() {
109 var div = $(this).parent().parent();
110 var selectSx = leftSel.children();
111 var selectDx = rightSel.children();
112 var selectedSx = leftSel.find("option:selected");
113 var selectedDx = rightSel.find("option:selected");
115 if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
116 div.find(".AddOne").addClass('ms2side__hide');
118 div.find(".AddOne").removeClass('ms2side__hide');
121 div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
122 // if (selectDx.size() > 1)
123 // div.find(".SelSort").removeClass('ms2side__hide');
124 if (selectedDx.size() > 0) {
125 div.find(".RemoveOne").removeClass('ms2side__hide');
126 // // ALL SELECTED - NO MOVE
127 // if (selectedDx.size() < selectDx.size()) { // FOR NOW (JOE) && selectedDx.size() == 1
128 // if (selectedDx.val() != selectDx.val()) // FIRST OPTION, NO UP AND TOP BUTTON
129 // div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
130 // if (selectedDx.last().val() != selectDx.last().val()) // LAST OPTION, NO DOWN AND BOTTOM BUTTON
131 // div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
135 if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
136 div.find(".AddAll").addClass('ms2side__hide');
138 div.find(".AddAll").removeClass('ms2side__hide');
140 if (selectDx.size() == 0)
141 div.find(".RemoveAll").addClass('ms2side__hide');
143 div.find(".RemoveAll").removeClass('ms2side__hide');
145 leftSel.sortOptions();
146 rightSel.sortOptions();
149 // DOUBLE CLICK ON LEFT SELECT OPTION
150 leftSel.dblclick(function () {
151 $(this).find("option:selected").each(function(i, selected){
153 if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
154 $(this).remove().appendTo(rightSel);
155 el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
158 $(this).trigger('change');
161 // DOUBLE CLICK ON RIGHT SELECT OPTION
162 rightSel.dblclick(function () {
163 $(this).find("option:selected").each(function(i, selected){
164 $(this).remove().appendTo(leftSel);
165 el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
167 $(this).trigger('change');
171 $(this).next().find('.ms2side__options').children().click(function () {
172 if (!$(this).hasClass("ms2side__hide")) {
173 if ($(this).hasClass("AddOne")) {
174 leftSel.find("option:selected").each(function(i, selected){
175 $(this).remove().appendTo(rightSel);
176 el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
179 } else if ($(this).hasClass("AddAll")) { // ALL SELECTED
180 leftSel.children().appendTo(rightSel);
181 leftSel.children().remove();
182 el.find('option').attr("selected", true);
183 // el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
185 } else if ($(this).hasClass("RemoveOne")) {
186 rightSel.find("option:selected").each(function(i, selected){
187 $(this).remove().appendTo(leftSel);
188 el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
191 } else if ($(this).hasClass("RemoveAll")) { // ALL REMOVED
192 rightSel.children().appendTo(leftSel);
193 rightSel.children().remove();
194 el.find('option').attr("selected", false);
195 //el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
199 leftSel.trigger('change');
202 // CLICK ON UP - DOWN
203 $(this).next().find('.ms2side__updown').children().click(function () {
204 var selectedDx = rightSel.find("option:selected");
205 var selectDx = rightSel.find("option");
207 if (!$(this).hasClass("ms2side__hide")) {
208 if ($(this).hasClass("SelSort")) {
209 // SORT SELECTED ELEMENT
210 selectDx.sort(function(a, b) {
211 var compA = $(a).text().toUpperCase();
212 var compB = $(b).text().toUpperCase();
213 return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
215 // FIRST REMOVE FROM ORIGINAL SELECT
216 el.find("option:selected").remove();
217 // AFTER ADD ON ORIGINAL AND RIGHT SELECT
218 selectDx.each(function() {
219 rightSel.append($(this).clone().attr("selected", true));
220 el.append($(this).attr("selected", true));
223 } else if ($(this).hasClass("MoveUp")) {
224 var prev = selectedDx.first().prev();
225 var hPrev = el.find("[value=" + prev.val() + "]");
227 selectedDx.each(function() {
228 $(this).insertBefore(prev);
229 el.find("[value=" + $(this).val() + "]").insertBefore(hPrev); // HIDDEN SELECT
232 } else if ($(this).hasClass("MoveDown")) {
233 var next = selectedDx.last().next();
234 var hNext = el.find("[value=" + next.val() + "]");
236 selectedDx.each(function() {
237 $(this).insertAfter(next);
238 el.find("[value=" + $(this).val() + "]").insertAfter(hNext); // HIDDEN SELECT
241 } else if ($(this).hasClass("MoveTop")) {
242 var first = selectDx.first();
243 var hFirst = el.find("[value=" + first.val() + "]");
245 selectedDx.each(function() {
246 $(this).insertBefore(first);
247 el.find("[value=" + $(this).val() + "]").insertBefore(hFirst); // HIDDEN SELECT
250 } else if ($(this).hasClass("MoveBottom")) {
251 var last = selectDx.last();
252 var hLast = el.find("[value=" + last.val() + "]");
254 selectedDx.each(function() {
255 last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
256 hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast); // HIDDEN SELECT
261 leftSel.trigger('change');
265 $(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
267 $(this).addClass('ms2side_hover');
270 $(this).removeClass('ms2side_hover');
274 // UPDATE BUTTON ON START
275 leftSel.trigger('change');
276 // SHOW WHEN ALL READY
277 $(this).next().show();