Skip to content

B
bootstrap-multiselect
Commit 659a0853 authored by David Stutz's avatar David Stutz
Browse files
Options

Added select/deselect method. 

Select or deselect an specific option by its value.
parent 06fede5e
Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 33 deletions
README.md
View file @ 659a0853
...@@ -226,6 +226,14 @@ Refresh the selected elements depending on the selected options within the selec ...@@ -226,6 +226,14 @@ Refresh the selected elements depending on the selected options within the selec
Rebuilds the whole dropdown menu. Selected options will still be selected. Rebuilds the whole dropdown menu. Selected options will still be selected.
**.multiselect('select', value)**
Selects an option by its value.
**.multiselect('deselect', value)**
Deselects an option by its value.
## Additional Styling ## Additional Styling
Additional Styling can be done using the multiselect class: Additional Styling can be done using the multiselect class:
......
index.html
View file @ 659a0853
...@@ -86,6 +86,12 @@ ...@@ -86,6 +86,12 @@
} }
} }
}); });
$('#example16').multiselect({
onChange: function(option, checked) {
$('#example16').multiselect('select', option.val());
}
});
}); });
</script> </script>
<p> <p>
...@@ -262,6 +268,23 @@ ...@@ -262,6 +268,23 @@
Use the <code>buttonWidth</code> option to adjust the width of the button. Use the <code>buttonWidth</code> option to adjust the width of the button.
</td> </td>
</tr> </tr>
<tr>
<td>
<div class="btn-group">
<select id="example16" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</td>
<td>
Using the <code>onChange</code> option to prevent user from deselecting selected options.
</td>
</tr>
</table> </table>
<div class="page-header"> <div class="page-header">
<h1>Code</h1> <h1>Code</h1>
...@@ -368,12 +391,32 @@ ...@@ -368,12 +391,32 @@
$('option[value="add2"]', $('#example12')).remove(); $('option[value="add2"]', $('#example12')).remove();
$('option[value="add3"]', $('#example12')).remove(); $('option[value="add3"]', $('#example12')).remove();
}); });
$('#example17').multiselect({
buttonContainer: '<span />'
});
$('#example17-cheese').on('click', function() {
$('#example17').multiselect('select', 'cheese');
});
$('#example17-mushrooms').on('click', function() {
$('#example17').multiselect('select', 'mushrooms');
});
$('#example18').multiselect({
buttonContainer: '<span />'
});
$('#example18-cheese').on('click', function() {
$('#example18').multiselect('deselect', 'cheese');
});
$('#example18-mushrooms').on('click', function() {
$('#example18').multiselect('deselect', 'mushrooms');
});
}); });
</script> </script>
<table class="table table-striped"> <table class="table table-striped">
<tbody> <tbody>
<tr> <tr>
<td><code>.multiselect('destroy')</code></td> <td width="20%"><code>.multiselect('destroy')</code></td>
<td> <td>
<div class="btn-group"> <div class="btn-group">
<select id="example8" multiple="multiple"> <select id="example8" multiple="multiple">
...@@ -433,6 +476,46 @@ ...@@ -433,6 +476,46 @@
Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!). Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).
</td> </td>
</tr> </tr>
<tr>
<td><code>.multiselect('select', value)</code></td>
<td>
<div class="btn-group">
<select id="example17" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example17-cheese" class="btn">Select cheese</button>
<button id="example17-mushrooms" class="btn">Select Mushrooms</button>
</div>
</td>
<td>
Selects an option by its value.
</td>
</tr>
<tr>
<td><code>.multiselect('select', value)</code></td>
<td>
<div class="btn-group">
<select id="example18" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example18-cheese" class="btn">Deselect cheese</button>
<button id="example18-mushrooms" class="btn">Deselect Mushrooms</button>
</div>
</td>
<td>
Deselect an option by its value.
</td>
</tr>
</tbody> </tbody>
</table> </table>
<div class="page-header"> <div class="page-header">
......
js/bootstrap-multiselect.js
View file @ 659a0853
...@@ -52,26 +52,26 @@ ...@@ -52,26 +52,26 @@
function Multiselect(select, options) { function Multiselect(select, options) {
this.options = this.getOptions(options); this.options = this.getOptions(options);
this.select = $(select); this.$select = $(select);
// Manually add the multiple attribute, if its not already set. // Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) { if (!this.$select.attr('multiple')) {
this.select.attr('multiple', true); this.$select.attr('multiple', true);
} }
this.container = $(this.options.buttonContainer) this.$container = $(this.options.buttonContainer)
.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>') .append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<ul class="dropdown-menu"></ul>'); .append('<ul class="dropdown-menu"></ul>');
if (this.options.buttonWidth) { if (this.options.buttonWidth) {
$('button', this.container).css({ $('button', this.$container).css({
'width': this.options.buttonWidth 'width': this.options.buttonWidth
}); });
} }
// Set max height of dropdown menu to activate auto scrollbar. // Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) { if (this.options.maxHeight) {
$('ul', this.container).css({ $('ul', this.$container).css({
'max-height': this.options.maxHeight + 'px', 'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto', 'overflow-y': 'auto',
'overflow-x': 'hidden' 'overflow-x': 'hidden'
...@@ -80,9 +80,9 @@ ...@@ -80,9 +80,9 @@
this.buildDrowdown(select, this.options); this.buildDrowdown(select, this.options);
this.select this.$select
.hide() .hide()
.after(this.container); .after(this.$container);
}; };
Multiselect.prototype = { Multiselect.prototype = {
...@@ -107,8 +107,8 @@ ...@@ -107,8 +107,8 @@
} }
}, },
// Is triggered on change of the selected options. // Is triggered on change of the selected options.
onChange: function() { onChange: function(option, checked) {
}, },
buttonClass: 'btn', buttonClass: 'btn',
buttonWidth: 'auto', buttonWidth: 'auto',
...@@ -127,19 +127,19 @@ ...@@ -127,19 +127,19 @@
buildDrowdown: function(select, options){ buildDrowdown: function(select, options){
// Build the dropdown. // Build the dropdown.
$('option', this.select).each($.proxy(function(index, element) { $('option', this.$select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) { if ($(element).is(':selected')) {
$(element).attr('selected', 'selected'); $(element).attr('selected', 'selected');
$(element).prop('selected', 'selected'); $(element).prop('selected', 'selected');
} }
$('ul', this.container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>'); $('ul', this.$container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
var selected = $(element).prop('selected') || false; var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container); var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.$container);
if ($(element).is(':disabled')) { if ($(element).is(':disabled')) {
checkbox.attr('disabled', 'disabled').prop('disabled','disabled').parents('li').addClass('disabled') checkbox.attr('disabled', 'disabled').prop('disabled', 'disabled').parents('li').addClass('disabled')
} }
checkbox.prop('checked', selected); checkbox.prop('checked', selected);
...@@ -150,7 +150,7 @@ ...@@ -150,7 +150,7 @@
}, this)); }, this));
// Bind the change event on the dropdown elements. // Bind the change event on the dropdown elements.
$('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) { $('ul li input[type="checkbox"]', this.$container).on('change', $.proxy(function(event) {
var checked = $(event.target).prop('checked') || false; var checked = $(event.target).prop('checked') || false;
if (checked) { if (checked) {
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
$(event.target).parents('li').removeClass('active'); $(event.target).parents('li').removeClass('active');
} }
var option = $('option[value="' + $(event.target).val() + '"]', this.select); var option = $('option[value="' + $(event.target).val() + '"]', this.$select);
if (checked) { if (checked) {
option.attr('selected', 'selected'); option.attr('selected', 'selected');
...@@ -170,42 +170,70 @@ ...@@ -170,42 +170,70 @@
option.removeAttr('selected'); option.removeAttr('selected');
} }
var options = $('option:selected', this.select); var options = $('option:selected', this.$select);
$('button', this.container).html(this.options.buttonText(options)); $('button', this.$container).html(this.options.buttonText(options));
this.options.onChange(option, checked); this.options.onChange(option, checked);
}, this)); }, this));
$('ul li a', this.container).on('click', function(event) { $('ul li a', this.$container).on('click', function(event) {
event.stopPropagation(); event.stopPropagation();
}); });
}, },
// Destroy - unbind - the plugin. // Destroy - unbind - the plugin.
destroy: function() { destroy: function() {
this.container.remove(); this.$container.remove();
this.select.show(); this.$select.show();
}, },
// Refreshs the checked options based on the current state of the select. // Refreshs the checked options based on the current state of the select.
refresh: function() { refresh: function() {
$('option', this.select).each($.proxy(function(index, element) { $('option', this.$select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) { if ($(element).is(':selected')) {
$('ul li input[value="' + $(element).val() + '"]', this.container).prop('checked', true); $('ul li input[value="' + $(element).val() + '"]', this.$container).prop('checked', true);
$('ul li input[value="' + $(element).val() + '"]', this.container).parents('li').addClass('active'); $('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').addClass('active');
} }
else { else {
$('ul li input[value="' + $(element).val() + '"]', this.container).prop('checked', false); $('ul li input[value="' + $(element).val() + '"]', this.$container).prop('checked', false);
$('ul li input[value="' + $(element).val() + '"]', this.container).parents('li').removeClass('active'); $('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').removeClass('active');
} }
}, this)); }, this));
$('button', this.container).html(this.options.buttonText($('option:selected', this.select))); $('button', this.$container).html(this.options.buttonText($('option:selected', this.$select)));
}, },
select: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.parents('li').addClass('active');
checkbox.prop('checked', true);
option.attr('selected', 'selected');
option.prop('selected', 'selected');
var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options));
},
deselect: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.parents('li').removeClass('active');
checkbox.prop('checked', false);
option.removeAttr('selected');
option.removeProp('selected');
var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options));
},
rebuild: function() { rebuild: function() {
$('ul', this.container).html(''); $('ul', this.$container).html('');
this.buildDrowdown(this.select, this.options); this.buildDrowdown(this.$select, this.options);
}, },
// Get options by merging defaults and given options. // Get options by merging defaults and given options.
...@@ -214,7 +242,7 @@ ...@@ -214,7 +242,7 @@
} }
}; };
$.fn.multiselect = function (option) { $.fn.multiselect = function (option, parameter) {
return this.each(function () { return this.each(function () {
var data = $(this).data('multiselect'), var data = $(this).data('multiselect'),
options = typeof option == 'object' && option; options = typeof option == 'object' && option;
...@@ -224,7 +252,7 @@ ...@@ -224,7 +252,7 @@
} }
if (typeof option == 'string') { if (typeof option == 'string') {
data[option](); data[option](parameter);
} }
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment