diff options
| -rw-r--r-- | demos.html | 18 | ||||
| -rw-r--r-- | js/application.js | 2 | ||||
| -rw-r--r-- | js/jquery.multi-select.js | 36 |
3 files changed, 55 insertions, 1 deletions
@@ -35,6 +35,7 @@ <div id='demos-container'> <ul id='demos-menu'> <li id='simple' class='active'>Simple</li> + <li id='keeporder'>Keep Order</li> <li id='optgroup'>Optgroup</li> <li id='callbacks'>Callbacks</li> <li id='outside'>Outside call</li> @@ -63,6 +64,23 @@ </select> </form> </div> + <div class='keeporder' style='display:none'> + <form> + <select multiple='multiple' id='ikeeporder'> + <option value='fr'>France</option> + <option value='ca' selected='selected'>Canada</option> + <option value='ar' selected='selected'>Argentina</option> + <option value='pt'>Portugal</option> + <option value='us'>United States</option> + <option value='gb'>United Kingdom</option> + <option value='au'>Australia</option> + <option value='ao'>Angola</option> + <option value='aq'>Antarctica</option> + <option value='bq'>Burkina Faso</option> + <option value='cn'>China</option> + </select> + </form> + </div> <div class='optgroup' style='display:none'> <form> <select multiple='multiple' class='multiselect' id='optgroup'> diff --git a/js/application.js b/js/application.js index 81a2fe6..d2dbaae 100644 --- a/js/application.js +++ b/js/application.js @@ -28,6 +28,8 @@ $('#simpleCountries').multiSelect({}); + $('#ikeeporder').multiSelect({ keepOrder: true }); + $('#empty-array-select').multiSelect({ emptyArray: true}) $('#callbackCountries').multiSelect({ diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js index 1127d16..bb69c08 100644 --- a/js/jquery.multi-select.js +++ b/js/jquery.multi-select.js @@ -1,3 +1,13 @@ +/* +* MultiSelect v0.2 +* Copyright (c) 2011 Louis Cuny +* +* Dual licensed under the MIT and GPL licenses: +* http://www.opensource.org/licenses/mit-license.php +* http://www.gnu.org/licenses/gpl.html +* +*/ + (function($){ var msMethods = { 'init' : function(options){ @@ -5,6 +15,7 @@ disabledClass : 'disabled', emptyArray : false, callbackOnInit: false + keepOrder : false }; if(options) { this.settings = $.extend(this.settings, options); @@ -110,7 +121,30 @@ selectedLi.click(function(){ ms.multiSelect('deselect', $(this).attr('ms-value')); }); - selectedUl.append(selectedLi); + + var selectedUlLis = selectedUl.children('.ms-elem-selected'); + if (method != 'init' && ms.data('settings').keepOrder && selectedUlLis.length > 0) { + + var getIndexOf = function(value) { + elems = selectableUl.children('.ms-elem-selectable'); + return(elems.index(elems.closest('[ms-value="'+value+'"]'))); + } + + var index = getIndexOf(selectedLi.attr('ms-value')); + if (index == 0) + selectedUl.prepend(selectedLi); + else { + for (i = index - 1; i >= 0; i--){ + if (selectedUlLis[i] && getIndexOf($(selectedUlLis[i]).attr('ms-value')) < index) { + $(selectedUlLis[i]).after(selectedLi); + break; + } + } + } + } else { + selectedUl.append(selectedLi); + } + if (ms.find("option[value='']")){ ms.find("option[value='']").removeAttr('selected'); } |