Standard Select


<div class="form-group drop-down-list">
    <label for="test1">Select Person</label>
    <input id="test1" class="form-control" placeholder="Select a value">
    <span class="ddl-caret"></span>
    <ul class="dropdown-menu">
        <li><a>Bob</a></li>
        <li><a>Bill</a></li>
        <li><a>Carla</a></li>
        <li><a>Danny</a></li>
        <li><a>Frank</a></li>
        <li><a>Karim</a></li>
        <li><a>kris</a></li>
        <li><a>Lee</a></li>
        <li><a>Loni</a></li>
        <li><a>Michael</a></li>
        <li><a>Mario</a></li>
        <li><a>Nancy</a></li>
        <li><a>Perl</a></li>
        <li><a>Polina</a></li>
        <li><a>Rey</a></li>
        <li><a>Robin</a></li>
        <li><a>Sam</a></li>
    </ul>
</div>

Standard Select with null option


<div class="form-group drop-down-list">
    <label for="test2">Select Person</label>
    <input id="test2" class="form-control nullable" placeholder="Select a value">
    <span class="ddl-caret"></span>
    <ul class="dropdown-menu">
        <li><a>Bob</a></li>
        <li><a>Bill</a></li>
        <li><a>Carla</a></li>
        <li><a>Danny</a></li>
        <li><a>Frank</a></li>
        <li><a>Karim</a></li>
        <li><a>kris</a></li>
        <li><a>Lee</a></li>
        <li><a>Loni</a></li>
        <li><a>Michael</a></li>
        <li><a>Mario</a></li>
        <li><a>Nancy</a></li>
        <li><a>Perl</a></li>
        <li><a>Polina</a></li>
        <li><a>Rey</a></li>
        <li><a>Robin</a></li>
        <li><a>Sam</a></li>
    </ul>
</div>

Multiline options without specified select text


<div class="form-group drop-down-list">
    <label for="test3">Select a value</label>
    <input id="test3" class="form-control" placeholder="Select a value">
    <span class="ddl-caret"></span>
    <ul class="dropdown-menu">
        <li><a><b>Option 1 Title</b><div>details1</div></a></li>
        <li><a><b>Option 2 Title</b><div>details2</div></a></li>
        <li><a><b>Option 3 Title</b><div>details3</div></a></li>
        <li><a><b>Option 4 Title</b><div>details4</div></a></li>
    </ul>
</div>

Multiline options with set text values


<div class="form-group drop-down-list">
    <label for="test4">Select a value</label>
    <input id="test4" class="form-control" placeholder="Select a value">
    <span class="ddl-caret"></span>
    <ul class="dropdown-menu">
        <li data-text="Custom Value 1"><a><b>Option 1 Title</b><div>details1</div></a></li>
        <li data-text="Custom Value 2"><a><b>Option 2 Title</b><div>details2</div></a></li>
        <li data-text="Custom Value 3"><a><b>Option 3 Title</b><div>details3</div></a></li>
        <li data-text="Custom Value 4"><a><b>Option 4 Title</b><div>details4</div></a></li>
    </ul>
</div>

Horizontal form example


<div class="form-group drop-down-list">
    <label for="IDGoesHere" class="col-sm-4 control-label">Overall Status</label>
    <div class="col-sm-8">
        <input id="IDGoesHere" class="form-control" placeholder="Select a value">
        <span class="ddl-caret"></span>
        <ul class="dropdown-menu">
            <li><a>Not Started</a></li>
            <li><a>Started</a></li>
            <li><a>Completed</a></li>
        </ul>
    </div>
</div>

Simple loading


<div class="form-group drop-down-list">
    <label for="ex-2-1">Select Person</label>
    <input id="ex-2-1" class="form-control" placeholder="Select a value">
    <span class="ddl-caret"></span>
</div>

<script type="text/javascript">
    var opts = [
        'Option 1',
        'Option 2',
        'Option 3'
    ];
    $('#ex-2-1').loadOptions(opts, true);
</script>

Load value and text


<div class="form-group drop-down-list">
    <label for="ex-2-2">Select Person</label>
    <input id="ex-2-2" class="form-control nullable" placeholder="Select a value">
    <span class="ddl-caret"></span>
</div>

<script type="text/javascript">
    var opts = [{
        text: 'Option 1',
        value: 1
    },
    {
        text: 'Option 2',
        value: 2
    },
    {
        text: 'Option 3',
        value: 3
    }];
    $('#ex-2-2').loadOptions(opts, true);
</script>

Load HTML, display text, and value


<div class="form-group drop-down-list">
    <label for="ex-2-3">Select a value</label>
    <input id="ex-2-3" class="form-control" placeholder="Select a value">
    <span class="ddl-caret"></span>
</div>

<style>
	ul.dropdown-menu div.title{font-weight: bold;}
</style>
<script type="text/javascript">
    var opts = [{
        text: 'Option 1',
        html: '<div class="title">Option 1</div><div>Details</div>',
        value: 1
    },
    {
        text: 'Option 2',
        html: '<div class="title">Option 2</div><div>Details</div>',
        value: 2
    },
    {
        text: 'Option 3',
        html: '<div class="title">Option 3</div><div>Details</div>',
        value: 3
    }];
    $('#ex-2-3').loadOptions(opts, true);
</script>