selectable "optgroups" (without optgroups)

Use some custom css with Chosen to get selectable categories.

by Chandana Thota

HTML

<script src="http://morganthall.com/ujo/chosen-koenpunt/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://morganthall.com/ujo/chosen-koenpunt/chosen.css">
<select id="dark-select" class="chzn-select"
   id="ailment_id" name="ailment_id"
   style="width: 350px">
       
        <option class="category" value="" disabled selected>Please select</option>
       
        <option class="category">Allergies</option>
        <option class="item">Asthma</option>
        <option class="item">Food Allergies</option>
        <option class="item">Hay fever</option>
        <option class="item">Insect bite</option>

        <option class="category">Anxiety</option>

        <option class="category">Arthritis</option>

        <option class="category">Back Pain</option>
        <option class="item">Sciatica</option>

        <option class="category">Appi</option>
        <option class="item">ac appi</option>
        <option class="item">bc appi</option>
        <option class="item">abc</option>
</select>

CSS

.category, .item, .chzn-container-single .chzn-single {
    font-family: sans-serif}

.category {font-weight: bold}

.chzn-results li.item {padding-left: 25px;}

JavaScript

$(".chzn-select").chosen({
    create_option: true,
    persistent_create_option: true,
    create_option_text: 'add',
});