Skip to content

B
bootstrap-multiselect
Commit 897b6123 authored by David Stutz's avatar David Stutz
Browse files
Options

Merge pull request #709 from Aidurber/implement-data-attributes 

Implement data attributes
parents 3432dbad bfb69d00
Show whitespace changes
Inline Side-by-side
Showing with 93 additions and 4 deletions
dist/js/bootstrap-multiselect.js
View file @ 897b6123
......@@ -1413,24 +1413,39 @@
});
forEach(option.children, function(subOption) { // add children option tags
$tag.append($('<option/>').attr({
var attributes = {
value: subOption.value,
label: subOption.label || subOption.value,
title: subOption.title,
selected: !!subOption.selected,
disabled: !!subOption.disabled
}));
};
//Loop through attributes object and add key-value for each attribute
for (var key in subOption.attributes) {
attributes['data-' + key] = subOption.attributes[key];
}
//Append original attributes + new data attributes to option
$tag.append($('<option/>').attr(attributes));
});
}
else {
$tag = $('<option/>').attr({
var attributes = {
value: option.value,
label: option.label || option.value,
title: option.title,
class: option.class,
selected: !!option.selected,
disabled: !!option.disabled
});
};
//Loop through attributes object and add key-value for each attribute
for (var key in option.attributes) {
attributes['data-' + key] = option.attributes[key];
}
//Append original attributes + new data attributes to option
$tag = $('<option/>').attr(attributes);
$tag.text(option.label || option.value);
}
......
index.html
View file @ 897b6123
......@@ -4000,6 +4000,80 @@
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p>
You can add custom data attributes on option group children and non-grouped options:
</p>
<p>
Renders as: <pre class="prettyprint">&lt;option value=&quot;1&quot; label=&quot;Option 1&quot; selected=&quot;selected&quot; data-some-attribute=&quot;1&quot; data-another-attribute=&quot;false&quot;&gt;&lt;/option&gt;
&lt;option value=&quot;2&quot; label=&quot;Option 2&quot; data-some-attribute=&quot;2&quot;&gt;&lt;/option&gt;</pre>
</p>
<div class="example">
<div class="btn-group">
<script type="text/javascript">
$(document).ready(function() {
$('#example-dataprovider-data-attributes').multiselect();
var optionsData =[
{
"label": "Option 1",
"value": 1,
"selected": true,
"attributes": {
"some-attribute": 1,
"another-attribute": false
}
},
{
"label": "Option 2",
"value": 2,
"selected": false,
"attributes": {
"some-attribute": 2
}
}
];
$('#example-dataprovider-data-attributes').multiselect('dataprovider', optionsData);
});
</script>
<select id="example-dataprovider-data-attributes" multiple="multiple"></select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
$(&#39;#example-dataprovider-data-attributes&#39;).multiselect();
var optionsData =[
{
&quot;label&quot;: &quot;Option 1&quot;,
&quot;value&quot;: 1,
&quot;selected&quot;: true,
&quot;attributes&quot;: {
&quot;some-attribute&quot;: 1,
&quot;another-attribute&quot;: false
}
},
{
&quot;label&quot;: &quot;Option 2&quot;,
&quot;value&quot;: 2,
&quot;selected&quot;: false,
&quot;attributes&quot;: {
&quot;some-attribute&quot;: 2
}
}
];
$(&quot;#example-dataprovider-data-attributes&quot;).multiselect(&#39;dataprovider&#39;, optionsData);
});
&lt;/script&gt;
&lt;select id=&quot;example-dataprovider-data-attributes&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
</pre>
</div>
</div>
</td>
</tr>
<tr>
<td>
<code>.multiselect('setAllSelectedText', value)</code>
......
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