Skip to content

B
bootstrap-multiselect
Commit 2a65b4be authored by davidstutz's avatar davidstutz
Browse files
Options

Added #469.

parent 3f4e92f4
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 9 deletions
dist/js/bootstrap-multiselect.js
View file @ 2a65b4be
...@@ -1124,7 +1124,8 @@ ...@@ -1124,7 +1124,8 @@
groupCounter++; groupCounter++;
$tag = $('<optgroup/>').attr({ $tag = $('<optgroup/>').attr({
label: option.label || 'Group ' + groupCounter label: option.label || 'Group ' + groupCounter,
disabled: !!option.disabled
}); });
forEach(option.children, function(subOption) { // add children option tags forEach(option.children, function(subOption) { // add children option tags
...@@ -1132,7 +1133,8 @@ ...@@ -1132,7 +1133,8 @@
value: subOption.value, value: subOption.value,
label: subOption.label || subOption.value, label: subOption.label || subOption.value,
title: subOption.title, title: subOption.title,
selected: !!subOption.selected selected: !!subOption.selected,
disabled: !!subOption.disabled
})); }));
}); });
} }
...@@ -1141,7 +1143,8 @@ ...@@ -1141,7 +1143,8 @@
value: option.value, value: option.value,
label: option.label || option.value, label: option.label || option.value,
title: option.title, title: option.title,
selected: !!option.selected selected: !!option.selected,
disabled: !!option.disabled
}); });
} }
......
index.html
View file @ 2a65b4be
...@@ -2916,7 +2916,7 @@ ...@@ -2916,7 +2916,7 @@
{label: 'Option 3', title: 'Option 3', value: '3', selected: true}, {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
{label: 'Option 4', title: 'Option 4', value: '4'}, {label: 'Option 4', title: 'Option 4', value: '4'},
{label: 'Option 5', title: 'Option 5', value: '5'}, {label: 'Option 5', title: 'Option 5', value: '5'},
{label: 'Option 6', title: 'Option 6', value: '6'} {label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
]; ];
$('#example-dataprovider').multiselect('dataprovider', options); $('#example-dataprovider').multiselect('dataprovider', options);
}); });
...@@ -2935,7 +2935,7 @@ ...@@ -2935,7 +2935,7 @@
{label: 'Option 3', title: 'Option 3', value: '3', selected: true}, {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
{label: 'Option 4', title: 'Option 4', value: '4'}, {label: 'Option 4', title: 'Option 4', value: '4'},
{label: 'Option 5', title: 'Option 5', value: '5'}, {label: 'Option 5', title: 'Option 5', value: '5'},
{label: 'Option 6', title: 'Option 6', value: '6'} {label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
]; ];
$('#example-dataprovider').multiselect('dataprovider', options); $('#example-dataprovider').multiselect('dataprovider', options);
&lt;/script&gt; &lt;/script&gt;
...@@ -2956,7 +2956,7 @@ ...@@ -2956,7 +2956,7 @@
var optgroups = [ var optgroups = [
{ {
label: 'Group 1', children: [ label: 'Group 1', children: [
{label: 'Option 1.1', value: '1-1'}, {label: 'Option 1.1', value: '1-1', selected: true},
{label: 'Option 1.2', value: '1-2'}, {label: 'Option 1.2', value: '1-2'},
{label: 'Option 1.3', value: '1-3'} {label: 'Option 1.3', value: '1-3'}
] ]
...@@ -2965,7 +2965,7 @@ ...@@ -2965,7 +2965,7 @@
label: 'Group 2', children: [ label: 'Group 2', children: [
{label: 'Option 2.1', value: '1'}, {label: 'Option 2.1', value: '1'},
{label: 'Option 2.2', value: '2'}, {label: 'Option 2.2', value: '2'},
{label: 'Option 2.3', value: '3'} {label: 'Option 2.3', value: '3', disabled: true}
] ]
} }
]; ];
...@@ -2983,7 +2983,7 @@ ...@@ -2983,7 +2983,7 @@
var optgroups = [ var optgroups = [
{ {
label: 'Group 1', children: [ label: 'Group 1', children: [
{label: 'Option 1.1', value: '1-1'}, {label: 'Option 1.1', value: '1-1', selected: true},
{label: 'Option 1.2', value: '1-2'}, {label: 'Option 1.2', value: '1-2'},
{label: 'Option 1.3', value: '1-3'} {label: 'Option 1.3', value: '1-3'}
] ]
...@@ -2992,7 +2992,7 @@ ...@@ -2992,7 +2992,7 @@
label: 'Group 2', children: [ label: 'Group 2', children: [
{label: 'Option 2.1', value: '1'}, {label: 'Option 2.1', value: '1'},
{label: 'Option 2.2', value: '2'}, {label: 'Option 2.2', value: '2'},
{label: 'Option 2.3', value: '3'} {label: 'Option 2.3', value: '3', disabled: true}
] ]
} }
]; ];
...@@ -3791,6 +3791,43 @@ ...@@ -3791,6 +3791,43 @@
</pre> </pre>
</div> </div>
<p>The following examples is aimed to demonstrate the performance of the <code>.multiselect('dataprovider', data)</code> for a large number of options.</p>
<p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p>
<p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
var data = [];
for (var i = 0; i < 100; i++) {
var group = {label: 'Group ' + (i + 1), children: []};
for (var j = 0; j < 10; j++) {
group['children'].push({
label: 'Option ' + (i + 1) + '.' + (j + 1),
value: i + '-' + j
});
}
data.push(group);
}
$('#example-large-dataprovider-button').on('click', function() {
$('#example-large-dataprovider').multiselect({
maxHeight: 200
});
$('#example-large-dataprovider').multiselect('dataprovider', data);
});
});
</script>
<select id="example-large-dataprovider" multiple="multiple"></select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
</pre>
<div class="page-header"> <div class="page-header">
<h2 id="post">Server-Side Processing</h2> <h2 id="post">Server-Side Processing</h2>
</div> </div>
......
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