Skip to content

jQuery dropdownlist basic setup

Maikel Bos edited this page Jan 21, 2020 · 4 revisions

Include the following script files and the style sheets in your page(s). The style sheet jquery-dropdownlist.style.css is optional and provides basic styling; skip this or use it as a template if you want to provide your own styling. If you have installed the NuGet package you should find the script files in the Scripts folder and the style sheet in the Content folder.

<link rel="stylesheet" href="Content/jquery-dropdownlist.min.css" />
<link rel="stylesheet" href="Content/jquery-dropdownlist.style.min.css" />
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-dropdownlist.min.js"></script>

The plugin can be used to transform any element with children into a dropdown simply by calling the dropdownlist function on the jQuery object. It supports creating multiple dropdowns at the same time for a jQuery object containing more than one element.

<div id="example-dropdown">
    <div>Choice number 1</div>
    <div>Option 1a</div>
    <div>Second choice</div>
    <div>Final option</div>
</div>

<script type="text/javascript">
    $('#example-dropdown').dropdownlist();
</script>
Clone this wiki locally