xuqingkuang/bootstrap-dual-select

The plugin will makes one select box to be dual select box, the control is quite easy for users to understand and use.

bootstrap-dual-select's Issues

dual_select support langage change

JS FILE CODE
`// Generated by CoffeeScript 1.8.0
var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

(function($) {
var addEventsListener, dataName, destroy, getInstanceSelects, messages, refreshControls, refreshOptionsCount, refreshSelectedOptions, render, selectors, templates;
$.dualSelect = {
defaults: {
messages: {
available: 'Available',
selected: 'Selected',
showing: ' is showing ',
filter: 'Filter'
},
templates: {
'layout': function(options) {
return ['

', '

', '

', "" + options.messages.available + " " + options.title + "", "" + options.messages.showing + "<span class="badge count">0", '

', "<input type="text" placeholder="" + options.messages.filter + "" class="form-control filter">", '', '

', '

', '

', '

', "" + options.messages.selected + " " + options.title + "", "" + options.messages.showing + "<span class="badge count">0", '

', "<input type="text" placeholder="" + options.messages.filter + "" class="form-control filter">", '', '

', '

'].join('');
},
'buttons': {
'allToSelected': ['', '', ''].join(''),
'unselectedToSelected': ['', '', ''].join(''),
'selectedToUnselected': ['', '', ''].join(''),
'allToUnselected': ['', '', ''].join('')
}
},
filter: true,
maxSelectable: 0,
timeout: 300,
title: 'Items'
}
};
dataName = 'dualSelect';
selectors = {
unselectedSelect: '.dual-select-container[data-area="unselected"] select',
selectedSelect: '.dual-select-container[data-area="selected"] select',
unselectedOptions: 'option:not([selected])',
selectedOptions: 'option:selected',
visibleOptions: 'option:visible'
};
render = function($select, options) {
var $btnContainer, $instance, $selectedOptions, $selectedSelect, $unselectedOptions, $unselectedSelect, controlButton, controlButtons, dataType, marginTop, selectedOptionsValue, _ref;
$instance = $(options.templates.layout(options));
controlButtons = {
allToSelected: 'ats',
unselectedToSelected: 'uts',
selectedToUnselected: 'stu',
allToUnselected: 'atu'
};
$btnContainer = $instance.find('.control-buttons');
for (controlButton in controlButtons) {
dataType = controlButtons[controlButton];
$(options.templates.buttons[controlButton]).addClass(dataType).data('control', dataType).prop('disabled', true).appendTo($btnContainer);
}
marginTop = 80;
if (!options.title || options.title === '') {
$instance.find('h4').hide();
marginTop -= 34;
}
if (!options.filter || options.filter === '') {
$instance.find('.filter').hide();
marginTop -= 34;
}
$instance.find('.control-buttons').css('margin-top', "" + marginTop + "px");
_ref = getInstanceSelects($instance), $unselectedSelect = _ref[0], $selectedSelect = _ref[1];
$selectedOptions = $select.find(selectors['selectedOptions']).clone().prop('selected', false);
selectedOptionsValue = $selectedOptions.map(function(index, el) {
return $(el).val();
});
$unselectedOptions = $select.children().filter(function(index, el) {
var _ref1;
return _ref1 = $(el).val(), __indexOf.call(selectedOptionsValue, _ref1) < 0;
}).clone().prop('selected', false);
$unselectedSelect.append($unselectedOptions);
$selectedSelect.append($selectedOptions);
refreshControls($instance, false, options, $unselectedSelect, $selectedSelect);
refreshOptionsCount($instance, 'option', $unselectedSelect, $selectedSelect);
return $instance;
};
getInstanceSelects = function($instance) {
var $selectedSelect, $unselectedSelect;
$unselectedSelect = $instance.find(selectors['unselectedSelect']);
$selectedSelect = $instance.find(selectors['selectedSelect']);
return [$unselectedSelect, $selectedSelect];
};
refreshControls = function($instance, cancelSelected, options, $unselectedSelect, $selectedSelect) {
var $buttons, counts, maxReached, selectedOptionsCount, unselectedOptionsCount, _ref;
$buttons = $instance.find('.control-buttons button');
maxReached = false;
if (!(($unselectedSelect != null) && ($selectedSelect != null))) {
_ref = getInstanceSelects($instance), $unselectedSelect = _ref[0], $selectedSelect = _ref[1];
}
$buttons.prop('disabled', true);
$unselectedSelect.prop('disabled', false);
counts = refreshOptionsCount($instance, null, $unselectedSelect, $selectedSelect);
unselectedOptionsCount = counts[0], selectedOptionsCount = counts[1];
if (unselectedOptionsCount > 0) {
$buttons.filter('.ats').prop('disabled', false);
}
if ($unselectedSelect.find(selectors['selectedOptions']).size() > 0) {
$buttons.filter('.uts').prop('disabled', false);
}
if ($selectedSelect.find(selectors['selectedOptions']).size() > 0) {
$buttons.filter('.stu').prop('disabled', false);
}
if (selectedOptionsCount > 0) {
$buttons.filter('.atu').prop('disabled', false);
}
if (options.maxSelectable !== 0) {
if (selectedOptionsCount >= options.maxSelectable) {
$buttons.filter('.ats').prop('disabled', true);
$buttons.filter('.uts').prop('disabled', true);
$unselectedSelect.prop('disabled', true);
maxReached = true;
}
if ($unselectedSelect.find(':selected').size() + selectedOptionsCount > options.maxSelectable) {
$buttons.filter('.ats').prop('disabled', true);
$buttons.filter('.uts').prop('disabled', true);
maxReached = true;
}
if (unselectedOptionsCount > options.maxSelectable) {
$buttons.filter('.ats').prop('disabled', true);
maxReached = true;
}
if (maxReached) {
$instance.trigger('maxReached');
}
}
if (cancelSelected) {
$unselectedSelect.children().prop('selected', false);
return $selectedSelect.children().prop('selected', false);
}
};
refreshOptionsCount = function($instance, optionSelector, $unselectedSelect, $selectedSelect) {
var selectedOptionsCount, unselectedOptionsCount, _ref;
if (optionSelector == null) {
optionSelector = selectors['visibleOptions'];
}
if (!(($unselectedSelect != null) && ($selectedSelect != null))) {
_ref = getInstanceSelects($instance), $unselectedSelect = _ref[0], $selectedSelect = _ref[1];
}
unselectedOptionsCount = $unselectedSelect.find(optionSelector).size();
selectedOptionsCount = $selectedSelect.find(optionSelector).size();
$instance.find('div[data-area="unselected"] .count').text(unselectedOptionsCount);
$instance.find('div[data-area="selected"] .count').text(selectedOptionsCount);
return [unselectedOptionsCount, selectedOptionsCount];
};
refreshSelectedOptions = function($select, $selectedSelect) {
var selectedValues;
selectedValues = $selectedSelect.children().map(function(i, el) {
return $(el).val();
});
$select.children().prop('selected', false).filter(function(i, el) {
var _ref;
return _ref = $(el).val(), __indexOf.call(selectedValues, _ref) >= 0;
}).prop('selected', true);
return $select.trigger('change');
};
addEventsListener = function($select, $instance, options) {
var delay, eventName, events, key, keyArray, listener, selector;
delay = (function() {
var timer;
timer = null;
return function(callback, timeout) {
clearTimeout(timer);
return timer = setTimeout(timeout, callback);
};
})();
events = {
'change select': function(evt) {
return refreshControls($instance, false, options);
},
'dblclick select': function(evt) {
var $el;
$el = $(evt.currentTarget);
if ($el.parents('.dual-select-container').data('area') === 'selected') {
return $instance.find('.control-buttons .stu').trigger('click');
}
return $instance.find('.control-buttons .uts').trigger('click');
},
'click .control-buttons button': function(evt) {
var $el, $selectedSelect, $unselectedSelect, callbacks;
$unselectedSelect = $instance.find(selectors['unselectedSelect']);
$selectedSelect = $instance.find(selectors['selectedSelect']);
callbacks = {
'ats': function() {
return callbacks.uts($unselectedSelect.children());
},
'uts': function($selectedOptions) {
if ($selectedOptions == null) {
$selectedOptions = $unselectedSelect.find('option:selected');
}
$selectedOptions.clone().appendTo($selectedSelect);
return $selectedOptions.remove();
},
'stu': function($selectedOptions) {
if ($selectedOptions == null) {
$selectedOptions = $selectedSelect.find('option:selected');
}
$selectedOptions.clone().appendTo($unselectedSelect);
return $selectedOptions.remove();
},
'atu': function() {
return callbacks.stu($selectedSelect.children());
}
};
$el = $(evt.currentTarget);
callbacks$el.data('control');
refreshControls($instance, true, options);
$instance.find('.uts, .stu').prop('disabled', true);
return refreshSelectedOptions($select, $selectedSelect);
},
'keyup input.filter': function(evt) {
var $el, $instanceSelect;
$el = $(evt.currentTarget);
$instanceSelect = null;
return delay(options.timeout, function() {
var area, value;
value = $el.val().trim().toLowerCase();
area = $el.parents('.dual-select-container').data('area');
$instanceSelect = $instance.find(selectors["" + area + "Select"]);
if (value === '') {
$instanceSelect.children().show();
} else {
$instanceSelect.children().hide().filter(function(i, option) {
var $option;
$option = $(option);
return $option.text().toLowerCase().indexOf(value) >= 0 || $option.val() === value;
}).show();
}
return refreshOptionsCount($instance);
});
}
};
for (key in events) {
listener = events[key];
keyArray = key.split(' ');
eventName = keyArray[0];
selector = keyArray.slice(1).join(' ');
$instance.on("" + eventName + ".delegateEvents", selector, listener);
}
return $instance;
};
destroy = function($select) {
if (!$select.data(dataName)) {
return;
}
$select.data(dataName).remove();
return $select.removeData(dataName).show();
};
return $.fn.dualSelect = function(options, selected) {
var instances;
$.each(this, function() {
if (this.nodeName !== 'SELECT') {
throw 'dualSelect only accept select element';
}
if ($(this).parents('.dual-select').size() > 0) {
throw 'dualSelect can not be initizied in dualSelect';
}
});
instances = $.map(this, function(element, index) {
var $instance, $select, htmlOptions;
$select = $(element);
if (options === 'destroy') {
return destroy($select);
}
htmlOptions = {
title: $select.data('title'),
timeout: $select.data('timeout'),
textLength: $select.data('textLength'),
moveAllBtn: $select.data('moveAllBtn'),
maxAllBtn: $select.data('maxAllBtn')
};
options = $.extend({}, $.dualSelect.defaults, htmlOptions, options);
options.maxSelectable = parseInt(options.maxSelectable);
if (isNaN(options.maxSelectable)) {
throw 'Option maxSelectable must be integer';
}
if ($select.data(dataName) != null) {
destroy($select);
}
$instance = render($select, options);
$instance.data('options', options);
addEventsListener($select, $instance, options);
$instance.insertAfter($select);
$select.data(dataName, $instance).hide();
return $instance[0];
});
return $(instances);
};
})(jQuery);

//# sourceMappingURL=bootstrap-dual-select.js.map`

USE
$('select').dualSelect({ messages: { available: 'available', selected: 'selected', showing: ' showing ', filter: 'filter' }, title: 'title', });

Jquery dependences ~2.0.0

Sure that this doesn't work with Jquery up to 2.0? like 3.0^??

"jquery": "~2.0.0

Sure that this doesn't work with :

"jquery": ">=2.0.0",

I have installed jquery": "^3.3", "minimum-stability": "dev", and when i install bootstrap-dual-select trought composer,return this :

`- bower-asset/bootstrap-dual-select v0.1.2 requires bower-asset/jquery ~2.0.0 -> satisfiable by bower-asset/jquery[2.0.3, 2.0.2, 2.0.1, 2.0.0, 2.0.0-beta2, 2.0.0-beta1, 2.0.0-beta3] but these conflict with your requirements or minimum-stability.

No selected items when add items after filter

Using filter first to filter some items then add to selected area, when submit, no selected items were submitted