Select2 list items

by Girisha Chennura

HTML

<script src="http://ivaynberg.github.com/select2/select2-3.3.1/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.3.1/select2.css">
<select>
    <option>Select Fruit</option>
    <option>Apple</option>
    <option>Apricot</option>
    <optgroup label="Select Banana type&hellip;">
        <option class="ripe">Banana</option>
        <option class="raw">Banana</option>
    </optgroup>
    <option>Coconut <span class="muted">(Tender)</span></option>
</select>

CSS

body {
    font: normal 14px/100% arial;
    margin: 50px 0 0 50px;
}

.muted {
    color:#999
}

ul, ol {
    padding: 0;
    margin: 0 0 9px 25px;
}

.select2-container {
    min-width: 275px
}

li.ripe .select2-result-label:after{
    content: " (Ripe)";
    color: #999;
}

li.raw .select2-result-label:after{
    content: " (Raw)";
    color: #999;
}

JavaScript

$(document).ready(function() {
    $("select").select2();
});