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.
1. Simple dropdown list which uses the default style
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.
2. Simple dropdown list with the selected top element hidden when opened
HTML and Javascript code
<h4>2. Simple dropdown list with the selected top element hidden when opened</h4> <div style="color: #497981; margin-bottom: 0.8333em;">Selected option: <span id="selectedOption11"></span></div> <select id="selList11" name="sel1"> <option value="0">Option 1</option> <option value="1">Option 2</option> <option value="2">Option 3</option> </select>
<script type="text/javascript">
// Execute on page load
$(function () {
// Initialize dropdown list
$('#selList11').ddlist({
width: 270,
selectionIndex: 1,
hideTopSelectedElement: true,
onSelected: function (index, value, text) {
// Show selected option in status panel
$('#selectedOption11').text(text + ' (value: ' + value + ')');
}
});
});
</script>
If you want the plugin to only show the dropdown list when it is active (and hide the top element that shows the selected option) you must
initialize the plugin by setting the hideTopSelectedElement plugin setting to true.
3. 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.
4. 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.
5. Disabled 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" disabled>
<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>
<div>
<input id="ddList4ToggleChkBox" type="checkbox" />
</div>
<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 + ')');
}
});
$('#ddList4ToggleChkBox').flatcheckbox({
label: "Check to enable listbox",
onChecked: function (el) {
$('#provincesList2').ddlist('enable', true);
$('#ddList4ToggleChkBox').flatcheckbox('label', "Uncheck to disable listbox");
},
onUnChecked: function (el) {
$('#provincesList2').ddlist('enable', false);
$('#ddList4ToggleChkBox').flatcheckbox('label', "Check to enable listbox");
}
});
});
</script>
Upon page load the dropdown list is disabled. This is due to the 'disabled' property that is defined for the <select> element.
When the checkbox is checked/unchecked method 'enable' is invoked which either enables or disables the dropdown list.
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.
6. Dropdown list with a JSON items source
When you click the next button then the dropdown list is re-populated with different list items. This is an example of a dropdown list of which the list items are inserted/updated after the dropdown list control has been constructed and presented to the user.
HTML and Javascript code
<h4>5. Dropdown list with a JSON items source</h4>
<div style="color: #497981; margin-bottom: 0.8333em;">Selected province: <span id="provinceSelect3"></span></div>
<select id="provincesList3"></select>
<div>
<p>When you click the next button then the dropdown list is re-populated with different list items.
This is an example of a dropdown list of which the list items are inserted/updated after the dropdown
list control has been constructed and presented to the user.</p>
</div>
<div class="clearfix">
<a href="#" class="commandButton" onclick="toggleList3(); return false;">Show other list options</a>
</div>
<script type="text/javascript">
var provOptions1 = [
{ text: "West-Vlaanderen", value: "0", description: "Capital: Brugge, inhabitants (2012): 1.169.990" },
{ text: "Oost-Vlaanderen", value: "1", selected: true },
{ text: "Vlaams-Brabant", value: "2" },
{ text: "Antwerpen", value: "3", description: "Capital: Antwerpen, inhabitants (2012): 1.781.904" },
{ text: "Limburg", value: "4", imageSrc: "http://code.cwwonline.be/media/1011/apple512.png" }
];
var provOptions2 = [
{ text: "Liege", value: "0", description: "Capital: Liege, inhabitants (2010): 1.067.685" },
{ text: "Hainaut", value: "1", description: "Capital: Mons, inhabitants (2010): 1.309.880" },
{ text: "Namur", value: "2" },
{ text: "Luxembourg", value: "3", selected: true },
{ text: "Brabant Wallon", value: "4", imageSrc: "http://code.cwwonline.be/media/1010/cherry512.png" }
];
var isProvOptions1 = true;
function toggleList3() {
var itemsSource = (isProvOptions1) ? provOptions2 : provOptions1;
isProvOptions1 = !isProvOptions1;
$('#provincesList3').ddlist('setItemsSource', itemsSource);
}
// Execute on page load
$(function () {
$('#provincesList3').ddlist({
width: 270,
itemsSource: provOptions1,
onSelectedOnInit: true,
onSelected: function (index, value, text) {
// Show selected province in status panel
$('#provinceSelect3').text(text + ' (value: ' + value + ')');
}
});
});
</script>
When the plugin is constructed parameter itemsSource is passed in order to configure the items in the dropdown list from the JSON array provOptions1. One of the items in the array has the selected key set to true.
When the 'Show other list options' button is pressed the toggleList3 function is called which replaces all items in the dropdown list by a different set. This is done with the Javascript code $('#provincesList3').ddlist('setItemsSource', itemsSource);.