jQuery Multiselect

by Camille Bechayda

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css">
<script src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/1.10/src/jquery.multiselect.min.js"></script>
<link rel="stylesheet" href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/1.10/jquery.multiselect.css">
<select id='optgroup' multiple='multiple'>
  <optgroup label='Friends'>
    <option value='1'>Yoda</option>
    <option value='2' selected>Obiwan</option>
  </optgroup>
  <optgroup label='Enemies'>
    <option value='3'>Palpatine</option>
    <option value='4' disabled>Darth Vader</option>
  </optgroup>
</select>

$('#optgroup').multiSelect({ selectableOptgroup: true });

<br/>

<input type="button" id="changeStatus" value="try me" />