How to implement option group in semantic-ui dropdown select

Question

I want to show categories and sub categories in a dropdown similar to select with option group in html.

How should I do it in semantic-ui. I didn't find any help on it.

Answer 1

I don't know if you still need this since the question is a bit old but I found this Fiddle.

Basically you would use div instead of select and option.

HTML

<div class="ui selection dropdown multiple search optgroup">
    <div class="text">Select</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="ui horizontal divider">Optgroup 1</div>
        <div class="item">Option 1</div>
        <div class="item">Option 2</div>
        <div class="ui horizontal divider">Optgroup 2</div>
        <div class="item">Option 3</div>
        <div class="item">Option 4</div>
    </div>
</div

CSS

.dropdown.optgroup .divider {
    border-top: none !important;
}

Jquery

$('.ui.dropdown').dropdown();