Dropdown is an advanced widget to select an item from a collection.
$('#basic').puidropdown();
<select id="basic" name="basic">
<option value="0">Select One</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script type="text/javascript">
$(function() {
var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze',
'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight',
'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 'trontastic',
'ui-darkness', 'ui-lightness', 'vader');
$('#basic').puidropdown();
$('#editable').puidropdown({
editable: true
});
$('#custom').puidropdown({
data: themes,
content: function(option) {
return '<img src="resources/demo/images/themes/' + option + '.png" alt="" /><span style="float:right;font-size:14px">' + option + '</span>';
}
});
$('#filter').puidropdown({
filter: true
});
});
</script>
<h3 class="title title-short" style="margin-top: 0px;">Basic</h3>
<select id="basic" name="basic">
<option value="0">Select One</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<h3 class="title title-short">Editable</h3>
<select id="editable" name="editable">
<option value="0">Select a City</option>
<option value="1">Barcelona</option>
<option value="2">Berlin</option>
<option value="3">Istanbul</option>
<option value="4">London</option>
<option value="5">New York</option>
<option value="6">Paris</option>
<option value="7">Rome</option>
</select>
<h3 class="title title-short">Custom Content</h3>
<select id="custom" name="custom" style="width: 180px;"></select>
<h3 class="title title-short">Filter</h3>
<select id="filter" name="filter">
<option value="0">Select a City</option>
<option value="1">Barcelona</option>
<option value="2">Berlin</option>
<option value="3">Istanbul</option>
<option value="4">London</option>
<option value="5">New York</option>
<option value="6">Paris</option>
<option value="7">Rome</option>
</select>