jQuery DropDown Templates

The ShieldUI DropDown widget allows you to define custom templates which will be rendered into each select item and underlying list item’s value. The templates are passed to the textTemplate and valueTemplate options and can be string or function - which returns string.

• String template

The string template can contain html elements which will be inserted into each optional item. The template can contain formatted string parameters which will be replaced with the data item’s values:

<select id="ddl" ></select>

<script type="text/javascript">

    $(function () {
        $("#ddl").shieldDropDown({
            dataSource: {
			    data: countries
		    },
		    textTemplate: "{name}",
		    valueTemplate: "{code}"
       });
    });

</script>

• Function as template

By assigning function to the templates you can have full power over the returned string and you can return different templates based on underlying data item:

<selectid="ddl" ></select>

<script type="text/javascript">

    $(function () {
        $("#ddl").shieldDropDown({
            dataSource: {
			    data: countries
		    },
		    textTemplate: function(item) {
			    return item.name;
		    },
		    valueTemplate: function(item) {
			    return item.code;
		    }
       });
    });

</script>

Live example of function as template you can find in the following DropDown demo.