Test for #709.

index.html

@@ -2990,7 +2990,7 @@
                     <table class="table layout-fixed">
                         <tbody>
                             <tr>
-                                <td>
+                                <td width="30%">
                                     <code>.multiselect('destroy')</code>
                                 </td>
                                 <td>
@@ -3998,19 +3998,11 @@
 &lt;select id=&quot;example-dataprovider-optgroups&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
 </pre>
                                     </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">
@@ -4072,6 +4064,13 @@
 </pre>
                                         </div>
                                     </div>
+                                    <p>
+                                        Renders as:
+                                    </p>
+<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>
                                 </td>
                             </tr>
                             <tr>

tests/spec/bootstrap-multiselect.js

@@ -368,6 +368,10 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
         {label: 'Option 6', value: '6', title: 'Option 6 Title'}
     ];
     
+    var options_attributes = [
+        {label: 'Option 1', value: '1', attributes: {'some-attribute': 'test'}}
+    ];
+    
     it("Should be able to add options.", function() {
         $('#multiselect').multiselect('dataprovider', options);
         expect($('#multiselect option').length).toBe(6);
@@ -416,6 +420,12 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
         expect($('#multiselect-container input[value="6"]').closest('label').attr('title')).toBe('Option 6 Title');
     });
     
+    it("Should be able to define data attributes.", function() {
+        $('#multiselect').multiselect('dataprovider', options_attributes)
+        expect($('#multiselect option[value="1"]').attr('value')).toBe('1');
+        expect($('#multiselect option[value="1"]').attr('data-some-attribute')).toBe('test');
+    });
+    
     var optgroups = [
         {
             label: 'Group 1', children: [
@@ -630,7 +640,7 @@ describe('Bootstrap Multiselect "Select All".', function() {
     });
 });
 
-describe('Bootstrap Multiselect Specific Issues', function() {
+describe('Bootstrap Multiselect Specific Issues.', function() {
     
     it('#393', function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
@@ -706,7 +716,7 @@ describe('Bootstrap Multiselect Specific Issues', function() {
     });
 });
 
-describe('Knockout Binding', function() {
+describe('Knockout Binding.', function() {
     var $testArea;
     afterEach(function() {
         if ($testArea) {
@@ -714,7 +724,7 @@ describe('Knockout Binding', function() {
         }
     });
 
-    it('Should update values and options with an observable array', function() {
+    it('Should update values and options with an observable array.', function() {
         jasmine.clock().install();
 
         $testArea = $('<select multiple="multiple" data-bind="selectedOptions: myValues, options: myOptions, multiselect: {numberDisplayed: 1}"></select>').appendTo(document.body);