Skip to content

B
bootstrap-multiselect
Commit 4690752e authored by David Stutz's avatar David Stutz
Browse files
Options

Merge pull request #401 from kayhadrin/features/support-preselection-and-caption-on-options 

#385, #384: titles for options, supporting dataprovider; dataprovider with preselected options.
parents 4b99758f e641c1d4
Show whitespace changes
Inline Side-by-side
Showing with 124 additions and 46 deletions
.gitignore
View file @ 4690752e
# Project files. # Project files.
*.project *.project
.idea/ .idea/
*.iml
nbproject/ nbproject/
index.html
View file @ 4690752e
...@@ -119,6 +119,8 @@ $(document).ready(function() { ...@@ -119,6 +119,8 @@ $(document).ready(function() {
$('#example2').multiselect(); $('#example2').multiselect();
$('#example54').multiselect();
$('#example3').multiselect({ $('#example3').multiselect({
buttonClass: 'btn btn-link' buttonClass: 'btn btn-link'
}); });
...@@ -321,6 +323,21 @@ $(document).ready(function() { ...@@ -321,6 +323,21 @@ $(document).ready(function() {
Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code> Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code>
</td> </td>
</tr> </tr>
<tr>
<td>
<select id="example54" multiple="multiple">
<option value="cheese" title="Smelly">Cheese</option>
<option value="tomatoes" title="Handsome">Tomatoes</option>
<option value="mozarella" title="Italian">Mozzarella</option>
<option value="mushrooms" title="Tender">Mushrooms</option>
<option value="pepperoni" title="Spicy">Pepperoni</option>
<option value="onions" title="Tasty">Onions</option>
</select>
</td>
<td>
Select with options titles (hover with mouse): <code>&lt;option value=&quot;cheese&quot; title=&quot;Smelly&quot;&gt;Cheese&lt;/option&gt;</code>
</td>
</tr>
<tr> <tr>
<td> <td>
<select id="example27" multiple="multiple"> <select id="example27" multiple="multiple">
...@@ -1354,18 +1371,27 @@ $(document).ready(function() { ...@@ -1354,18 +1371,27 @@ $(document).ready(function() {
}); });
var data = [ var data = [
{label: 'Cheese', value: 'cheese'}, { label: 'Cheese', value: 'cheese', caption: 'Swiss cheese' },
{label: 'Tomatoes', value: 'tomatoes'} { label: 'Tomatoes', value: 'tomatoes', caption: 'Red tomato', selected: true }
]; ];
$('#example49').multiselect(); $('#example49').multiselect().multiselect('dataprovider', data);
$('#example49').multiselect('dataprovider', data);
var data = [ var data = [
{title: 'First group', children: [{label: 'Cheese', value: 'cheese'}, {label: 'Tomatoes', value: 'tomatoes'}]}, {
{title: 'Second group', children: [{label: 'Mozzarella', value: 'mozzarella'}, {label: 'Mushrooms', value: 'mushrooms'}]}, title: 'First group',
children: [
{ label: 'Cheese', value: 'cheese', caption: 'Swiss cheese', selected: true },
{ label: 'Tomatoes', value: 'tomatoes', caption: 'Red tomato' }
]
}, {
title: 'Second group',
children: [
{ label: 'Mozzarella', value: 'mozzarella', caption: 'Italian cheese' },
{ label: 'Mushrooms', value: 'mushrooms', caption: 'French mushroom' }
]
}
]; ];
$('#example50').multiselect(); $('#example50').multiselect().multiselect('dataprovider', data);
$('#example50').multiselect('dataprovider', data);
}); });
</script> </script>
<table class="table table-striped"> <table class="table table-striped">
...@@ -1488,21 +1514,32 @@ $(document).ready(function() { ...@@ -1488,21 +1514,32 @@ $(document).ready(function() {
<p> <p>
Provides data for building the select's options the following way: Provides data for building the select's options the following way:
</p> </p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums" style="max-width: none">
var data = [ var data = [
{label: 'Cheese', value: 'cheese'}, { label: 'Cheese', value: 'cheese', caption: 'Swiss cheese', selected: true },
{label: 'Tomatoes', value: 'tomatoes'} { label: 'Tomatoes', value: 'tomatoes', caption: 'Red tomato' }
]; ];
$(&quot;#multiselect&quot;).multiselect('dataprovider', data); $('multiselect').multiselect('dataprovider', data);
</pre> </pre>
<p> <p>
Alternatively, this method can also be used to build option groups (<a target="_blank" href="https://github.com/davidstutz/bootstrap-multiselect/pull/281">#281</a>): Alternatively, this method can also be used to build option groups (<a target="_blank" href="https://github.com/davidstutz/bootstrap-multiselect/pull/281">#281</a>):
</p> </p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums" style="max-width: none">
var data = [ var data = [
{title: 'First group', children: [{label: 'Cheese', value: 'cheese'}, {label: 'Tomatoes', value: 'tomatoes'}]}, {
{title: 'Second group', children: [{label: 'Mozzarella', value: 'mozzarella'}, {label: 'Mushrooms', value: 'mushrooms'}]}, title: 'First group',
children: [
{ label: 'Cheese', value: 'cheese', caption: 'Swiss cheese' },
{ label: 'Tomatoes', value: 'tomatoes', caption: 'Red tomato', selected: true }
]
}, {
title: 'Second group',
children: [
{ label: 'Mozzarella', value: 'mozzarella', caption: 'Italian cheese' },
{ label: 'Mushrooms', value: 'mushrooms', caption: 'French mushroom' }
]
}
]; ];
$('.multiselect').multiselect('dataprovider', data); $('.multiselect').multiselect('dataprovider', data);
</pre> </pre>
......
js/bootstrap-multiselect.js
View file @ 4690752e
...@@ -341,11 +341,12 @@ ...@@ -341,11 +341,12 @@
this.$select.children().each($.proxy(function(index, element) { this.$select.children().each($.proxy(function(index, element) {
var $element = $(element);
// Support optgroups and options without a group simultaneously. // Support optgroups and options without a group simultaneously.
var tag = $(element).prop('tagName') var tag = $element.prop('tagName')
.toLowerCase(); .toLowerCase();
if ($(element).prop('value') === this.options.selectAllValue) { if ($element.prop('value') === this.options.selectAllValue) {
return; return;
} }
...@@ -354,7 +355,7 @@ ...@@ -354,7 +355,7 @@
} }
else if (tag === 'option') { else if (tag === 'option') {
if ($(element).data('role') === 'divider') { if ($element.data('role') === 'divider') {
this.createDivider(); this.createDivider();
} }
else { else {
...@@ -556,27 +557,28 @@ ...@@ -556,27 +557,28 @@
* @param {jQuery} element * @param {jQuery} element
*/ */
createOptionValue: function(element) { createOptionValue: function(element) {
if ($(element).is(':selected')) { var $element = $(element);
$(element).prop('selected', true); if ($element.is(':selected')) {
$element.prop('selected', true);
} }
// Support the label attribute on options. // Support the label attribute on options.
var label = this.options.label(element); var label = this.options.label(element);
var value = $(element).val(); var value = $element.val();
var inputType = this.options.multiple ? "checkbox" : "radio"; var inputType = this.options.multiple ? "checkbox" : "radio";
var $li = $(this.options.templates.li); var $li = $(this.options.templates.li);
$('label', $li).addClass(inputType); var $label = $('label', $li);
$label.addClass(inputType);
var $checkbox = $('<input/>').attr('type', inputType);
if (this.options.checkboxName) { if (this.options.checkboxName) {
$('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />'); $checkbox.attr('name', this.options.checkboxName);
}
else {
$('label', $li).append('<input type="' + inputType + '" />');
} }
$label.append($checkbox);
var selected = $(element).prop('selected') || false; var selected = $element.prop('selected') || false;
var $checkbox = $('input', $li);
$checkbox.val(value); $checkbox.val(value);
if (value === this.options.selectAllValue) { if (value === this.options.selectAllValue) {
...@@ -585,11 +587,12 @@ ...@@ -585,11 +587,12 @@
.addClass('multiselect-all'); .addClass('multiselect-all');
} }
$('label', $li).append(" " + label); $label.append(" " + label);
$label.attr('title', $element.attr('title'));
this.$ul.append($li); this.$ul.append($li);
if ($(element).is(':disabled')) { if ($element.is(':disabled')) {
$checkbox.attr('disabled', 'disabled') $checkbox.attr('disabled', 'disabled')
.prop('disabled', true) .prop('disabled', true)
.parents('a') .parents('a')
...@@ -1005,29 +1008,66 @@ ...@@ -1005,29 +1008,66 @@
/** /**
* The provided data will be used to build the dropdown. * The provided data will be used to build the dropdown.
* *
* @param {Array} dataprovider * @param {Array} dataprovider Array of OPTION or OPTIONGROUP models.
* A simple OPTION tag is represented as:
* ```js
* {
* value: "option value"
* label: "option label" // (optional) If undefined, uses the `value` property instead
* caption: "option title" // (optional) If defined, this will become the `title` attribute of the OPTION tag
* // which in turn will be used as the `title` attribute of the LABEL tag
* selected: false // (optional) If `true`, mark the OPTION tag as selected
* }
* ```
*
* An OPTIONGROUP tag is represented as:
* ```js
* {
* label: "optiongroup label"
* children: [
* {
* // same as option model
* }
* ]
* }
* ```
*/ */
dataprovider: function(dataprovider) { dataprovider: function(dataprovider) {
var optionDOM = ""; var optionDOM = "";
var groupCounter = 0; var groupCounter = 0;
var tags = $(''); // create empty jQuery array
$.each(dataprovider, function (index, option) { $.each(dataprovider, function (index, option) {
if ($.isArray(option.children)) { var tag;
if ($.isArray(option.children)) { // create optiongroup tag
groupCounter++; groupCounter++;
optionDOM += '<optgroup label="' + (option.title || 'Group ' + groupCounter) + '">'; tag = $('<optgroup/>').attr({
label: option.title || 'Group ' + groupCounter
forEach(option.children, function(subOption) { });
optionDOM += '<option value="' + subOption.value + '">' + (subOption.label || subOption.value) + '</option>'; forEach(option.children, function(subOption) { // add children option tags
tag.append($('<option/>').attr({
value: subOption.value,
label: subOption.label || subOption.value,
title: subOption.caption,
selected: !!subOption.selected
}));
}); });
optionDOM += '</optgroup>'; optionDOM += '</optgroup>';
} }
else { else { // create option tag
optionDOM += '<option value="' + option.value + '">' + (option.label || option.value) + '</option>'; tag = $('<option/>').attr({
value: option.value,
label: option.label || option.value,
title: option.caption,
selected: !!option.selected
});
} }
tags = tags.add(tag);
}); });
this.$select.html(optionDOM); this.$select.empty().append(tags);
this.rebuild(); this.rebuild();
}, },
......
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