<div class="btn-group hierarchy-select" data-resize="auto" id="example-one">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="selected-label pull-left">&nbsp;</span>
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu open">
        <div class="hs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <ul class="dropdown-menu inner" role="menu">
            <li data-value="" data-level="1" data-default-selected="">
                <a href="#">All categories</a>
            </li>
            <li data-value="1" data-level="1">
                <a href="#">Wine</a>
            </li>
            <li data-value="2" data-level="2">
                <a href="#">Color</a>
            </li>
            ...
            <li data-value="21" data-level="3">
                <a href="#">Scotland</a>
            </li>
        </ul>
    </div>
    <input class="hidden hidden-field" name="example_one" readonly="readonly" aria-hidden="true" type="text"/>
</div>

$('#example-one').hierarchySelect({
    width: 200
});

<div class="btn-group hierarchy-select" data-resize="auto" id="example-two">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="selected-label pull-left">&nbsp;</span>
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu open">
        <div class="hs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <ul class="dropdown-menu inner" role="menu">
            <li data-value="" data-default-selected="">
                <a href="#">All colors</a>
            </li>
            <li data-value="1">
                <a href="#">Red</a>
            </li>
            ...
            <li data-value="11">
                <a href="#">White</a>
            </li>
        </ul>
    </div>
    <input class="hidden hidden-field" name="example_two" readonly="readonly" aria-hidden="true" type="text"/>
</div>

$('#example-two').hierarchySelect({
    hierarchy: false,
    width: 200
});

<div class="btn-group hierarchy-select" data-resize="auto" id="example-three">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="selected-label pull-left">&nbsp;</span>
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu open">
        <div class="hs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <ul class="dropdown-menu inner" role="menu">
            <li data-value="" data-default-selected="">
                <a href="#">All colors</a>
            </li>
            <li data-value="1">
                <a href="#">Red</a>
            </li>
            ...
            <li data-value="11">
                <a href="#">White</a>
            </li>
        </ul>
    </div>
    <input class="hidden hidden-field" name="example_three" readonly="readonly" aria-hidden="true" type="text"/>
</div>

$('#example-three').hierarchySelect({
    hierarchy: false,
    search: false,
    width: 200
});