1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
(function($){
var msMethods = {
'init' : function(options){
this.settings = {
};
if(options) {
this.settings = $.extend(this.settings, options);
}
var multiSelects = this;
multiSelects.hide();
multiSelects.each(function(){
var ms = $(this);
ms.attr('id', ms.attr('id') != undefined ? ms.attr('id') : 'select'+((new Date()).getTime()));
var container = $('<div id="ms-'+ms.attr('id')+'" class="ms-container"></div>').detach(),
selectableContainer = $('<div class="ms-selectable"></div>').detach(),
selectedContainer = $('<div class="ms-selection"></div>').detach(),
selectableUl = $('<ul></ul>').detach(),
selectedUl = $('<ul></ul>').detach();
ms.data('settings', multiSelects.settings);
ms.children('option').each(function(){
//alert($(this).val('title'));
var selectableLi = $('<li ms-value="'+$(this).val()+'" title="' + $(this).attr('title') + '">'+$(this).text()+'</li>').detach();
selectableLi.click(function(){
ms.multiSelect('select', $(this).attr('ms-value'));
});
selectableUl.append(selectableLi);
});
if (multiSelects.settings.selectableHeader){
selectableContainer.append(multiSelects.settings.selectableHeader);
}
selectableContainer.append(selectableUl);
if (multiSelects.settings.selectedHeader){
selectedContainer.append(multiSelects.settings.selectedHeader);
}
selectedContainer.append(selectedUl);
container.append(selectableContainer);
container.append(selectedContainer);
ms.after(container);
ms.children('option:selected').each(function(){
ms.multiSelect('select', $(this).val(), 'init');
});
});
},
'select' : function(value, method){
var ms = this,
msValues = (ms.val() ? ms.val() : []),
alreadyPresent = $.inArray(value, msValues),
text = ms.find('option[value="'+value+'"]').text();
title_attr = ms.find('option[value="'+value+'"]').attr('title');
if(alreadyPresent == -1 || method == 'init'){
var selectedLi = $('<li ms-value="'+value+'" title="' + title_attr + '">'+text+'</li>').detach(),
newValues = $.merge(msValues, [value]),
selectableUl = $('#ms-'+ms.attr('id')+' .ms-selectable ul'),
selectedUl = $('#ms-'+ms.attr('id')+' .ms-selection ul'),
selectableLi = selectableUl.children('li[ms-value="'+value+'"]');
selectableLi.hide();
ms.val(newValues);
selectedLi.click(function(){
ms.multiSelect('deselect', $(this).attr('ms-value'));
});
selectedUl.append(selectedLi);
if (typeof ms.data('settings').afterSelect == 'function' && method != 'init') {
ms.data('settings').afterSelect.call(this, value, text);
}
}
},
'deselect' : function(value){
var ms = this,
msValues = (ms.val() ? ms.val() : []),
present = false,
newValues = $.map(msValues, function(e){ if(e != value){ return e; }else{ present = true}});
if(present){
var selectableUl = $('#ms-'+ms.attr('id')+' .ms-selectable ul'),
selectedUl = $('#ms-'+ms.attr('id')+' .ms-selection ul'),
selectableLi = selectableUl.children('li[ms-value="'+value+'"]'),
selectedLi = selectedUl.children('li[ms-value="'+value+'"]').detach();
ms.val(newValues);
selectableLi.show();
selectedLi.remove();
if (typeof ms.data('settings').afterDeselect == 'function') {
ms.data('settings').afterDeselect.call(this, value, selectedLi.text());
}
}
},
'select_all' : function(){
var ms = this;
ms.children('option').each(function(){
ms.multiSelect('select', $(this).val(), 'select_all');
});
},
'deselect_all' :function(){
var ms = this;
ms.children('option').each(function(){
ms.multiSelect('deselect', $(this).val(), 'deselect_all');
});
}
}
$.fn.multiSelect = function(method){
if ( msMethods[method] ) {
return msMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return msMethods.init.apply( this, arguments );
} else {
if(console.log) console.log( 'Method ' + method + ' does not exist on jquery.multiSelect' );
}
}
})(jQuery);
|
