---
layout: default
---
<script type="text/javascript">
$(function(){
   $("select").multiselect();
});
</script>
<h2>Basic Demos</h2>

<p>Both multiselects are created with the following one-liner.  Optgroup support is built in out of the box:</p>
<pre class="prettyprint">
$(function(){
   $("select").multiselect(); 
});
</pre>

<h3>Basic</h3>
<p>
   <select title="Basic example" multiple="multiple" name="example-basic" size="5">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   <option value="option4">Option 4</option>
   <option value="option5">Option 5</option>
   <option value="option6">Option 6</option>
   <option value="option7">Option 7</option>
   <option value="option8">Option 8</option>
   <option value="option9">Option 9</option>
   <option value="option10">Option 10</option>
   <option value="option11">Option 11</option>
   <option value="option12">Option 12</option>
   </select>
</p>

<h3>With Optgroups</h3>
<p>Click on an optgroup's heading to toggle the checked state of the entire group.</p>
<p>
   <select name="example-optgroup" multiple="multiple" size="5">
   <optgroup label="Group One">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
   </optgroup>
   <optgroup label="Group Two">
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6">Option 6</option>
      <option value="option7">Option 7</option>
   </optgroup>
   </select>
</p>