jQuery DropDown Setup

Home >Shield UI Documentation >DropDown >JavaScript >jQuery DropDown Setup

The DropDown widget allows you to choose one of many possible options. The underling element from which the widget is created can be a SELECT, DIV or INPUT element. In order to render the DropDown JavaScript widget on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an input element for which to initialize the DropDown functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield DropDown</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
<body>
<select id="ddl"></select>

<script type="text/javascript">
    $(function () {
        $("#ddl").shieldDropDown({
            dataSource: {
			    data: countries
		    },
		    textTemplate: "{name}",
		    valueTemplate: "{code}",
            inputTemplate: "{name}"
       });
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.