Fixed #253 with extended example.

index-2-3.html

@@ -553,7 +553,7 @@
 					<tr>
 						<th>Option</th>
 						<th>Explanation</th>
-						<th>Usage</th>
+						<th width="50%">Usage</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -920,6 +920,9 @@
 			        $('#example8-destroy').on('click', function() {
 			            $('#example8').multiselect('destroy');
 			        });
+					$('#example8-create').on('click', function() {
+			            $('#example8').multiselect();
+			        });
                     
 			        $('#example10').multiselect();
 			        $('#example10-select').on('click', function() {
@@ -1005,6 +1008,7 @@
 									<option value="onions">Onions</option>
 								</select>
 								<button id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
+								<button id="example8-create" class="btn btn-success">Create/Bind</button>
 							</div>
 						</td>
 					</tr>
@@ -1455,7 +1459,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
 			<table class="table table-striped">
 				<tbody>
                     <tr>
-						<td style="width:400px">
+						<td>
                             <p>
                                 Use "Select" and "Deselect" to select or deselect cheese and tomatoes. Use "Values" to display the currently selected elements by using <code>$('.multiselect').val()</code>.
                             </p>
@@ -1474,7 +1478,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
 							</div>
                             <div id="example34-text" style="margin-top:6px;"></div>
 						</td>
-						<td>
+						<td width="60%">
 							<pre class="prettyprint linenums">
 &lt;script type=&quot;text/javascript&quot;&gt;
   $('#example34').multiselect();

index.html

@@ -702,7 +702,7 @@
 					</tr>
 					<tr>
 						<td><code>selectedClass</code></td>
-						<td>The class applied to the parent &lt;li&gt; of selected items. Default: <code>active</code>.</td>
+						<td>The class applied to the parent <code>&lt;li&gt;</code> of selected items. Default: <code>active</code>.</td>
 						<td>
 							<pre class="prettyprint linenums">
 &lt;script type=&quot;text/javascript&quot;&gt;
@@ -921,6 +921,9 @@
 			        $('#example8-destroy').on('click', function() {
 			            $('#example8').multiselect('destroy');
 			        });
+					$('#example8-create').on('click', function() {
+			            $('#example8').multiselect();
+			        });
                     
 			        $('#example10').multiselect();
 			        $('#example10-select').on('click', function() {
@@ -1006,6 +1009,7 @@
 									<option value="onions">Onions</option>
 								</select>
 								<button id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
+								<button id="example8-create" class="btn btn-success">Create/Bind</button>
 							</div>
 						</td>
 					</tr>
@@ -1456,7 +1460,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
 			<table class="table table-striped">
 				<tbody>
                     <tr>
-						<td style="width:400px">
+						<td>
                             <p>
                                 Use "Select" and "Deselect" to select or deselect cheese and tomatoes. Use "Values" to display the currently selected elements by using <code>$('.multiselect').val()</code>.
                             </p>

js/bootstrap-multiselect.js

@@ -884,12 +884,17 @@
             
             // Initialize the multiselect.
             if (!data) {
-                $(this).data('multiselect', ( data = new Multiselect(this, options)));
+                data = new Multiselect(this, options);
+                $(this).data('multiselect', data);
             }
 
             // Call multiselect method.
             if (typeof option === 'string') {
                 data[option](parameter);
+                
+                if (option === 'destroy') {
+                    $(this).data('multiselect', false);
+                }
             }
         });
     };