bootstrap-selectsplitter DEMO

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap.selectsplitter/0.1.4/bootstrap-selectsplitter.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-12" style="padding-top:40px;">
            <select data-selectsplitter-selector>
              <optgroup label="Category 1">
                <option value="1">Choice 1</option>
                <option value="2">Choice 2</option>
                <option value="3">Choice 3</option>
                <option value="4">Choice 4</option>
              </optgroup>
              <optgroup label="Category 2">
                <option value="8">Choice 5</option>
                <option value="6">Choice 6</option>
                <option value="7">Choice 7</option>
                <option value="5">Choice 8</option>
              </optgroup>
              <optgroup label="Category 3">
                <option value="5">Choice 9</option>
                <option value="6">Choice 10</option>
                <option value="7">Choice 11</option>
                <option value="8">Choice 12</option>
              </optgroup>
            </select>
        </div>
    </div>
</div>

JavaScript

$('select[data-selectsplitter-selector]').selectsplitter();