Dropdown List demo
This page shows a number of dropdown lists. Please select an item (option) from any of the lists and see how the selected item is displayed on the page.
Simple dropdown list
HTML and Javascript code
<h4>Simple dropdown list</h4>
<div style="color: #497981; margin-bottom: 0.8333em;">
Selected province: <span id="provinceSelect1"></span>
</div>
<select id="provincesList1" name="provincesOption1">
<option value="0">West-Vlaanderen</option>
<option value="1">Oost-Vlaanderen</option>
<option value="2">Vlaams-Brabant</option>
<option value="3">Antwerpen</option>
<option value="4">Limburg</option>
</select>
<script type="text/javascript">
// Execute on page load
$(function () {
// Initialize dropdown lists, checkboxes, ..
$('#provincesList1').ddlist({
width: 270,
selectionIndex: 1,
onSelected: function (index, value, text) {
// Show selected province in status panel
$('#provinceSelect1').text(text + ' (value: ' + value + ')');
}
});
});
</script>
Nothing special here: Property selectionIndex (with value 1) is passed to the plugin constructor to select the 2nd option.
Dropdown list with text and image
HTML and Javascript code
<h4>Dropdown list with text and image</h4>
<div style="color: #497981; margin-bottom: 0.8333em;">
Selected fruit: <span id="fruitSelect"></span>
</div>
<select id="fruitList1" name="fruitOption1">
<option value="0" data-imagesrc="http://code.cwwonline.be/media/1011/apple512.png">Apple</option>
<option value="1" data-imagesrc="http://code.cwwonline.be/media/1012/apricot512.png">Apricot</option>
<option value="2" data-imagesrc="http://code.cwwonline.be/media/1009/banana512.png" selected="selected">Banana</option>
<option value="3" data-imagesrc="http://code.cwwonline.be/media/1010/cherry512.png">Cherry</option>
<option value="4" data-imagesrc="http://code.cwwonline.be/media/1014/kiwi512.png">Kiwi</option>
<option value="5" data-imagesrc="http://code.cwwonline.be/media/1016/lemon512.png">Lemon</option>
<option value="6" data-imagesrc="http://code.cwwonline.be/media/1014/mango512.png">Mango</option>
<option value="7" data-imagesrc="http://code.cwwonline.be/media/1013/orange512.png">Orange</option>
<option value="8" data-imagesrc="http://code.cwwonline.be/media/1015/peach512.png">Peach</option>
<option value="10" data-imagesrc="http://code.cwwonline.be/media/1017/pear512.png">Pear</option>
<option value="9" data-imagesrc="http://code.cwwonline.be/media/1018/strawberry512.png">Strawberry</option>
</select>
<script type="text/javascript">
// Execute on page load
$(function () {
$('#fruitList1').ddlist({
width: 180,
onSelected: function (index, value, text) {
// Show selected province in status panel
$('#fruitSelect').text(text + ' (value: ' + value + ')');
}
});
});
</script>
There is no need to pass property selectionIndex to the plugin constructor since one of the items in the <select> has the selected attribute set. The plugin will then automatically choose that item as being selected.
The definition in the CSS file for styling images will position any image to the left. If you want this to be different (e.g. on the right side of the option text) then you have to modify the CSS file or add your own style to your page.
This is how the modified styles for the 2 'fruit' dropdown lists look like:
<style>
/* Drop down list with images */
#ddList-fruitList1 > a,
#ddList-fruitList2 > a,
#ddList-fruitList1 > ul li a,
#ddList-fruitList2 > ul li a {
padding-top: 0.1em;
padding-bottom: 0.1em;
}
#ddList-fruitList1 img,
#ddList-fruitList2 img {
max-width: 32px;
}
#ddList-fruitList1 label,
#ddList-fruitList2 label {
display: inline-block;
margin-top: 5px;
}
/* Drop down list with images on the right side */
#ddList-fruitList2 > a > img,
#ddList-fruitList2 > ul li a > img {
float: right;
margin-right: 0;
margin-left: 5px;
}
</style>
Important
You will have to use ddlist container element ids when you want to change styles. Remember then that these ids are the same as the <select> ids but with ddList- prepended.
Dropdown list with scrollbar
HTML and Javascript code
<style>
/* Drop down list with vertical scrollbar */
#ddList-colorsList > ul {
max-height: 197px;
}
</style>
<h4>Dropdown list with scrollbar</h4>
<div style="color: #497981; margin-bottom: 0.8333em;">
Selected color: <span id="colorSelect"></span>
</div>
<select id="colorsList" name="colorsOption">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white" selected>White</option>
<option value="black">Black</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="brown">Brown</option>
<option value="gray">Gray</option>
<option value="violet">Violet</option>
</select>
<script type="text/javascript">
// Execute on page load
$(function () {
$('#colorsList').ddlist({
width: 150,
onSelected: function (index, value, text) {
// Show selected color in status panel
$('#colorSelect').text(text + ' (value: ' + value + ', index: ' + index + ')');
}
});
});
</script>
As you can see in the <style>..</style> section you must define max-height for the container's <ul> element if you want to limit the number of visible option items and have a vertical scrollbar in the dropdown.
Dropdown list with text and description
HTML and Javascript code
<style>
/* Truncate description in selection element */
#ddList-provincesList2 > a > small {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<h4>Dropdown list with text and description</h4>
<div style="color: #497981; margin-bottom: 0.8333em;">
Selected province: <span id="provinceSelect2"></span>
</div>
<select id="provincesList2" name="provincesOption1">
<option value="0" data-description="Capital: Brugge, inhabitants (2012): 1.169.990">West-Vlaanderen</option>
<option value="1" selected data-description="Capital: Gent, inhabitants (2012): 1.454.716">Oost-Vlaanderen</option>
<option value="2" data-description="Capital: Leuven, inhabitants (2012): 1.094.751">Vlaams-Brabant</option>
<option value="3" data-description="Capital: Antwerpen, inhabitants (2012): 1.781.904">Antwerpen</option>
<option value="4" data-description="Capital: Hasselt, inhabitants (2012): 849.404">Limburg</option>
</select>
<script type="text/javascript">
// Execute on page load
$(function () {
$('#provincesList2').ddlist({
width: 270,
onSelected: function (index, value, text) {
// Show selected province in status panel
$('#provinceSelect2').text(text + ' (value: ' + value + ')');
}
});
});
</script>
As you can see the data-description string assigned to an option item appears both in the selection element of the dropdown list and in the list itself. The CSS file that comes with the plugin always shows the complete description inside a <small>..</small> element. If you want to truncate the description then you must adapt the style as shown above.