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
Show 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
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 can be done using the multiselect class:
......
index.html
View file @ 659a0853
......@@ -86,6 +86,12 @@
}
}
});
$('#example16').multiselect({
onChange: function(option, checked) {
$('#example16').multiselect('select', option.val());
}
});
});
</script>
<p>
......@@ -262,6 +268,23 @@
Use the <code>buttonWidth</code> option to adjust the width of the button.
</td>
</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>
<div class="page-header">
<h1>Code</h1>
......@@ -368,12 +391,32 @@
$('option[value="add2"]', $('#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>
<table class="table table-striped">
<tbody>
<tr>
<td><code>.multiselect('destroy')</code></td>
<td width="20%"><code>.multiselect('destroy')</code></td>
<td>
<div class="btn-group">
<select id="example8" multiple="multiple">
......@@ -433,6 +476,46 @@
Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).
</td>
</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>
</table>
<div class="page-header">
......
js/bootstrap-multiselect.js
View file @ 659a0853
......@@ -52,26 +52,26 @@
function Multiselect(select, options) {
this.options = this.getOptions(options);
this.select = $(select);
this.$select = $(select);
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
if (!this.$select.attr('multiple')) {
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('<ul class="dropdown-menu"></ul>');
if (this.options.buttonWidth) {
$('button', this.container).css({
$('button', this.$container).css({
'width': this.options.buttonWidth
});
}
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('ul', this.container).css({
$('ul', this.$container).css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden'
......@@ -80,9 +80,9 @@
this.buildDrowdown(select, this.options);
this.select
this.$select
.hide()
.after(this.container);
.after(this.$container);
};
Multiselect.prototype = {
......@@ -107,7 +107,7 @@
}
},
// Is triggered on change of the selected options.
onChange: function() {
onChange: function(option, checked) {
},
buttonClass: 'btn',
......@@ -127,19 +127,19 @@
buildDrowdown: function(select, options){
// Build the dropdown.
$('option', this.select).each($.proxy(function(index, element) {
$('option', this.$select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$(element).attr('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 checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.$container);
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);
......@@ -150,7 +150,7 @@
}, this));
// 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;
if (checked) {
......@@ -160,7 +160,7 @@
$(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) {
option.attr('selected', 'selected');
......@@ -170,42 +170,70 @@
option.removeAttr('selected');
}
var options = $('option:selected', this.select);
$('button', this.container).html(this.options.buttonText(options));
var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options));
this.options.onChange(option, checked);
}, this));
$('ul li a', this.container).on('click', function(event) {
$('ul li a', this.$container).on('click', function(event) {
event.stopPropagation();
});
},
// Destroy - unbind - the plugin.
destroy: function() {
this.container.remove();
this.select.show();
this.$container.remove();
this.$select.show();
},
// Refreshs the checked options based on the current state of the select.
refresh: function() {
$('option', this.select).each($.proxy(function(index, element) {
$('option', this.$select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$('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).prop('checked', true);
$('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').addClass('active');
}
else {
$('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).prop('checked', false);
$('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').removeClass('active');
}
}, 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() {
$('ul', this.container).html('');
this.buildDrowdown(this.select, this.options);
$('ul', this.$container).html('');
this.buildDrowdown(this.$select, this.options);
},
// Get options by merging defaults and given options.
......@@ -214,7 +242,7 @@
}
};
$.fn.multiselect = function (option) {
$.fn.multiselect = function (option, parameter) {
return this.each(function () {
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
......@@ -224,7 +252,7 @@
}
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