Functionalities in Essential JavaScript DropDown List

7 Jun 202324 minutes to read

Selection

By default only one item can be selected from the popup list. For multiple selection, you have to enable checkboxes. The selected item consist of active class (“e-active”) to differentiate it from other items.

The following API’s, select the items in the DropDownList via text or value or indices.

Properties
Description

value


To select an item initially, you can pass the item’s value via value property.
Multiple items can select via value property, the given values should be separated by delimiter character.

text


To select an item initially, you can pass the item’s text via text property.
Multiple items can select via text property, the given values should be separated by delimiter character.

selectedIndex


Select a single item by passing an index value to the selectedIndex property.

selectedIndices


Select more than one items by passing index values to the selectedIndices property when multi selection enabled.

NOTE

Index starts from 0 here.
To use “selectedIndices” property, you should enable with showCheckbox or multiSelectMode property.

The following methods, select the items in the DropDownList.

Methods
Description

selectItemByIndices


This method is used to select the list of items in the DropDownList through the Index of the items.

selectItemByText


This method is used to select an item in the DropDownList by using the given text value.

selectItemByValue


This method is used to select an item in the DropDownList by using the given value.

The following methods, used to retrieve the items from the DropDownList.

Methods
Description

getListData


This method is used to retrieve the items that are bound with the DropDownList.

getSelectedItem


This method is used to get the selected items in the DropDownList.

getSelectedValue


This method is used to retrieve the items value that are selected in the DropDownList.

IMPORTANT

When multiSelectMode is enabled in a DropDownList and selected items having same text but its value is different means, the items can be selected. Please refer the online link

Using value or text

To select an item initially you can pass the item’s value via value property or selectItemByValue method or selectedIndex property. To achieve this DropDownList widget must be initiated with the associate value.

  • HTML
  • <input type="text" id="dropdown1" />
  • JAVASCRIPT
  • $(function() {
            var items = [{
                text: "ListItem 1",
                value: "item1"
            }, {
                text: "ListItem 2",
                value: "item2"
            }, {
                text: "ListItem 3",
                value: "item3"
            }, {
                text: "ListItem 4",
                value: "item4"
            }, {
                text: "ListItem 5",
                value: "item5"
            }];
            $('#dropdown1').ejDropDownList({
                dataSource: items,
                fields: {
                    text: "text",
                    value: "value"
                },
                value: "item3"
            });
        });

    Functionalities in JavaScript DropDown List

    NOTE

    To retrieve the selected item’s LI elements and value you can use getSelectedItem, getSelectedValue methods respectively.

  • HTML
  • <input type="text" id="dropdown1" />
  • JAVASCRIPT
  • $(function() {
            var items = [{
                text: "ListItem 1",
                value: "item1"
            }, {
                text: "ListItem 2",
                value: "item2"
            }, {
                text: "ListItem 3",
                value: "item3"
            }, {
                text: "ListItem 4",
                value: "item4"
            }, {
                text: "ListItem 5",
                value: "item5"
            }];
            $('#dropdown1').ejDropDownList({
                dataSource: items,
                fields: {
                    text: "text",
                    value: "value"
                },
                selectedIndex: 0
            });
            var obj = $('#dropdown1').data("ejDropDownList");
            //the below given code will return the li element of the selected item
            console.log(obj.getSelectedItem());
            //the below given code will return the JSON object of the selected item
            console.log(JSON.parse(obj.getSelectedValue()));
        });

    Using indices

    You can select a single or more than one item by passing index values to the properties selectedIndex or selectedIndices respectively. Index starts from 0 here.

  • HTML
  • <input type="text" id="dropdown1" />
  • JAVASCRIPT
  • $(function() {
            var items = [{
                text: "ListItem 1",
                value: "item1"
            }, {
                text: "ListItem 2",
                value: "item2"
            }, {
                text: "ListItem 3",
                value: "item3"
            }, {
                text: "ListItem 4",
                value: "item4"
            }, {
                text: "ListItem 5",
                value: "item5"
            }];
            $('#dropdown1').ejDropDownList({
                dataSource: items,
                fields: {
                    text: "text",
                    value: "value"
                },
                selectedIndex: 1
            });
        });

    Using Indices JavaScript DropDown List

    IMPORTANT

    To use “selectedIndices” property, you should enable either showCheckbox or multiSelectMode property First.

  • HTML
  • <input type="text" id="dropdown1" />
  • JAVASCRIPT
  • $(function() {
            var items = [{
                text: "ListItem 1",
                value: "item1"
            }, {
                text: "ListItem 2",
                value: "item2"
            }, {
                text: "ListItem 3",
                value: "item3"
            }, {
                text: "ListItem 4",
                value: "item4"
            }, {
                text: "ListItem 5",
                value: "item5"
            }];
            $('#dropdown1').ejDropDownList({
                dataSource: items,
                fields: {
                    text: "text",
                    value: "value"
                },
                showCheckbox: true,
                selectedIndices: [1, 2]
            });
    		
        });

    Unselect items

    Similarly, you can unselect a single or multiple items by using unselectItemByValue or unselectItemByIndices or unselectItemByText methods. This will remove the selection state of the corresponding data item from the popup list and textbox.

  • HTML
  • <input type="text" id="dropdown1" />
    
                <input type="button" value="Unselect" onclick="unselect()" />
  • JAVASCRIPT
  • var obj;
    
        $(function() {
          var items = [{
              text: "ListItem 1",
              value: "item1"
          }, {
              text: "ListItem 2",
              value: "item2"
          }, {
              text: "ListItem 3",
              value: "item3"
          }, {
              text: "ListItem 4",
              value: "item4"
          }, {
              text: "ListItem 5",
              value: "item5"
          }];
          $('#dropdown1').ejDropDownList({
              width: 300,
              dataSource: items,
              fields: {
                  text: "text",
                  value: "value"
              },
              showCheckbox: true,
              selectedIndices: [1, 2, 3]
          });
          obj = $('#dropdown1').data("ejDropDownList");
          console.log("Selected Item's Text - " + obj.option("text"));
          console.log("selected Item's Value - " + obj.option("value"));
        });
    
        function unselect() {
          obj.unselectItemByValue("item2");
          obj.unselectItemByIndices(2);
          obj.unselectItemByText("ListItem 4");
        }

    Grouping

    The DropDownList items can be categorized by using a specific field in the popup list. This is enabled by using groupBy field on data source binding. By default grouping is disabled in DropDownList.
    The below given example explains the behavior of grouping with JSON array binding.

  • HTML
  • <input type="text" id="dropdown1" />
  • JAVASCRIPT
  • $(function() {
    	    var skills = [{
    	        skill: "Cabbage",
    	        category: "Leafy and Salad"
    	    }, {
    	        skill: "Pea",
    	        category: "Leafy and Salad"
    	    }, {
    	        skill: "Spinach",
    	        category: "Leafy and Salad"
    	    }, {
    	        skill: "Wheat grass",
    	        category: "Leafy and Salad"
    	    }, {
    	        skill: "Yarrow",
    	        category: "Leafy and Salad"
    	    }, {
    	        skill: "Chickpea",
    	        category: "Beans"
    	    }, {
    	        skill: "Green bean",
    	        category: "Beans"
    	    }, {
    	        skill: "Horse gram",
    	        category: "Beans"
    	    }, {
    	        skill: "Peanut",
    	        category: "Beans"
    	    }, {
    	        skill: "Pigeon pea",
    	        category: "Beans"
    	    }, {
    	        skill: "Garlic",
    	        category: "Bulb and Stem"
    	    }, {
    	        skill: "Garlic Chives",
    	        category: "Bulb and Stem"
    	    }, {
    	        skill: "Lotus root",
    	        category: "Bulb and Stem"
    	    }, {
    	        skill: "Parsnip",
    	        category: "Bulb and Stem"
    	    }, {
    	        skill: "Onion",
    	        category: "Bulb and Stem"
    	    }, {
    	        skill: "Shallot",
    	        category: "Bulb and Stem"
    	    }, {
    	        skill: "Beetroot",
    	        category: "Root and Tuberous"
    	    }, {
    	        skill: "Carrot",
    	        category: "Root and Tuberous"
    	    }, {
    	        skill: "Ginger",
    	        category: "Root and Tuberous"
    	    }, {
    	        skill: "Potato",
    	        category: "Root and Tuberous"
    	    }, {
    	        skill: "Radish",
    	        category: "Root and Tuberous"
    	    }, {
    	        skill: "Turmeric",
    	        category: "Root and Tuberous"
    	    }];
    	    $('#dropdown1').ejDropDownList({
    	        width: 150,
    	        popupHeight: 300,
    	        watermarkText: "Select a vegetable",
    	        dataSource: skills,
    	        fields: {
    	            text: "skill",
    	            groupBy: "category"
    	        }
    	    });
    	});

    Grouping in JavaScript DropDown List

    NOTE

    Grouping has restrictions in the following scenarios,

    1. It is not supported on using HTML “select” element with predefined set of options
    2. When using UL-LI elements you need to use “e-category” class in LI element to specify it as the grouping header. The following code will explain this behavior,
    3. The sorting behavior varies when grouping is enabled in the DropDownList, based on browser as we have used browser based stable sorting method when there is multiple level of sorting.
    4. To overcome this behavior on sorting order with browser, we suggest you to set ej.support.stableSort as false from the script when the page is loaded or in document ready function.
  • JAVASCRIPT
  • <script type="text/javascript">
                $(document).ready(function () {
                    ej.support.stableSort = false;            
                });
        </script>
  • HTML
  • <input type="text" id="dropdown1" />
  • JAVASCRIPT
  • $(function() {
    	    $('#dropdown1').ejDropDownList({
    	        targetID: "dropDownItems"
    	    });
    	});

    Sorting in JavaScript DropDown List

    IMPORTANT

    Virtual scrolling is not supported with Grouping.

    Sorting

    Sorting is enabled to order to display the items alphabetically in either ascending or descending order. By default the items is displayed in the initialized order, use enableSorting property to automatically sort strings based on text field value. You can assign either “ascending” or “descending” string values to the sortOrder property to sort out the list items. By default ascending order is followed when “sortOrder” property is not specified.

  • HTML
  • <input type="text" id="dropdown1" />
  • JAVASCRIPT
  • $(function() {
    	    var items = [{
    	        text: "ListItem 1",
    	        value: "item1"
    	    }, {
    	        text: "ListItem 5",
    	        value: "item5"
    	    }, {
    	        text: "ListItem 4",
    	        value: "item4"
    	    }, {
    	        text: "ListItem 2",
    	        value: "item2"
    	    }, {
    	        text: "ListItem 3",
    	        value: "item3"
    	    }, ];
    	    $('#dropdown1').ejDropDownList({
    	        dataSource: items,
    	        fields: {
    	            text: "text",
    	            value: "value"
    	        },
    	        enableSorting: true,
    	        sortOrder: "ascending"
    	    });
    	});

    IMPORTANT

    Virtual scrolling is not supported with Sorting.

    Cascading

    This works for series of DropDownList in which items are filtered based on the previous DropDownList‘s selection. Cascading is performed based on the value field and this field should be bounded with a foreign key. To perform cascading, specify the child DropDownList’s id in cascadeTo property and use delimiter (“,”) to specify more than one child DropDownList.

    Configuring the data items for cascading to the series of DropDownList is demonstrated below

  • HTML
  • <div style="width: 400px;">
        	<div style="float: left;">
            	<span>Select Group</span>
            	<input id="groups" type="text" />
        	</div>
    
        	<div style="float: right;">
            	<span>Select Country</span>
            	<input id="countries" type="text" />
        	</div>
    	</div>
  • JAVASCRIPT
  • $(function() {
            //first dropdown
            var groups = [{
                parentId: 'a',
                text: "Group A"
            }, {
                parentId: 'b',
                text: "Group B"
            }, {
                parentId: 'c',
                text: "Group C"
            }, {
                parentId: 'd',
                text: "Group D"
            }, {
                parentId: 'e',
                text: "Group E"
            }];
            //second dropdown
            var countries = [{
                value: 11,
                parentId: 'a',
                text: "Algeria"
            }, {
                value: 12,
                parentId: 'a',
                text: "Armenia"
            }, {
                value: 13,
                parentId: 'a',
                text: "Bangladesh"
            }, {
                value: 14,
                parentId: 'a',
                text: "Cuba"
            }, {
                value: 15,
                parentId: 'b',
                text: "Denmark"
            }, {
                value: 16,
                parentId: 'b',
                text: "Egypt"
            }, {
                value: 17,
                parentId: 'c',
                text: "Finland"
            }, {
                value: 18,
                parentId: 'c',
                text: "India"
            }, {
                value: 19,
                parentId: 'c',
                text: "Malaysia"
            }, {
                value: 20,
                parentId: 'd',
                text: "New Zealand"
            }, {
                value: 21,
                parentId: 'd',
                text: "Norway"
            }, {
                value: 22,
                parentId: 'd',
                text: "Poland"
            }, {
                value: 23,
                parentId: 'e',
                text: "Romania"
            }, {
                value: 24,
                parentId: 'e',
                text: "Singapore"
            }, {
                value: 25,
                parentId: 'e',
                text: "Thailand"
            }, {
                value: 26,
                parentId: 'e',
                text: "Ukraine"
            }];
            $('#groups').ejDropDownList({
                dataSource: groups,
                fields: {
                    text: "text",
                    value: "parentId"
                },
                cascadeTo: 'countries'
            });
            $('#countries').ejDropDownList({
                dataSource: countries,
                enabled: false
            });
        });

    Cascading in JavaScript DropDown List

    Cascade Event in JavaScript DropDown List

    Binding the data source to the cascading DropDownList using cascade event

    Bind the data source to the cascading DropDownList dynamically using cascade event as demonstrated below,

  • HTML
  • <div style="width: 530px;">
        <div style="float: left;">
            <span>Select Group</span>
            <input id="groups" type="text" />
        </div>
    
        <div style="float: left; padding-left: 50px;">
            <span>Select Country</span>
            <input id="countries" type="text" />
        </div>
    
        <div style="float: right;">
            <span>Select Players</span>
            <input id="players" type="text" />
        </div>
    	</div>
  • JAVASCRIPT
  • $(function() {
            //first dropdown
            var groups = [{
                parentId: 'a',
                text: "Group A"
            }, {
                parentId: 'b',
                text: "Group B"
            }];
            $('#groups').ejDropDownList({
                dataSource: groups,
                fields: {
                    text: "text",
                    value: "parentId"
                },
                cascadeTo: "countries,players",
                cascade: 'onChange'
            });
            $('#countries').ejDropDownList({
                enabled: false
            });
            $('#players').ejDropDownList({
                enabled: false
            });
        });
    
        function onChange(args) {
            var countries = [{
                parentId: 'a',
                text: "Algeria"
            }, {
                parentId: 'a',
                text: "Armenia"
            }, {
                parentId: 'a',
                text: "Bangladesh"
            }, {
                parentId: 'a',
                text: "Cuba"
            }, {
                parentId: 'b',
                text: "Denmark"
            }, {
                parentId: 'b',
                text: "Egypt"
            }];
    
            var players = [{
                parentId: 'a',
                text: "Adams"
            }, {
                parentId: 'a',
                text: "Clarke"
            }, {
                parentId: 'b',
                text: "Brett"
            }, {
                parentId: 'b',
                text: "James"
            }];
    
            var obj2 = $('#countries').data("ejDropDownList");
            obj2.option({
                "dataSource": countries,
                "enabled": true
            });
    
            var obj3 = $('#players').data("ejDropDownList");
            obj3.option({
                "dataSource": players,
                "enabled": true
            });
        }

    Binding Data Source in JavaScript DropDown List

    Multi-Level Cascading

    The below scenario can be explained with three DropDownList for the multi-level cascading

  • HTML
  • <div class="frame">
            <div class="control" style="float: left; padding:10px;">
                <span class="txt">Select Continent</span>
                <input id="groups" type="text" />
            </div>
            <div class="control" style="float: left; padding:10px;">
                <span class="txt">Select Country</span>
                <input id="countries" type="text" />
            </div>
            <div class="control" style="float: left; padding:10px;">
                <span class="txt">Select State</span>
                <input id="capitalList" type="text" />
            </div>
        </div>
  • JAVASCRIPT
  • <script type="text/javascript">
           var target;
           $(function () {
               // declaration
               var groups = [
               { parentId: 'a', text: "Africa" },
               { parentId: 'b', text: "Asia" },
               { parentId: 'c', text: "Europe" },
               { parentId: 'd', text: "North America" },
               { parentId: 'e', text: "South America" },
               { parentId: 'f', text: "Oceania" },
               { parentId: 'g', text: "Antarctica" }]
               //Countries List
               var countries = [
               { value: 11, parentId: 'a', text: "Algeria" },
               { value: 12, parentId: 'a', text: "Egypt" },
               { value: 13, parentId: 'b', text: "Armenia" },
               { value: 14, parentId: 'b', text: "Bangladesh" },
               { value: 15, parentId: 'b', text: "India" },
               { value: 16, parentId: 'c', text: "Denmark" },
               { value: 17, parentId: 'c', text: "Finland" },
               { value: 18, parentId: 'd', text: "Cuba" },
               { value: 19, parentId: 'd', text: "USA" },
               { value: 20, parentId: 'e', text: "Brazil" },
               { value: 21, parentId: 'e', text: "Peru" },
               { value: 22, parentId: 'f', text: "Australia" },
               { value: 23, parentId: 'f', text: "New Zealand" },
               { value: 24, parentId: 'g', text: "French Southern" },
               { value: 25, parentId: 'g', text: "South Georgia" }]
               //Capital List
               var capital = [
               { value: 11, text: "Algiers" },
               { value: 12, text: "Cairo" },
               { value: 13, text: "Yerevan" },
               { value: 14, text: "Dhaka" },
               { value: 15, text: "New Delhi" },
               { value: 16, text: "Copenhagen" },
               { value: 17, text: "Helsinki" },
               { value: 18, text: "Havana" },
               { value: 19, text: "Washington, D.C." },
               { value: 20, text: "Brasilia" },
               { value: 21, text: "Lima" },
               { value: 22, text: "Canberra" },
               { value: 23, text: "Wellington" },
               { value: 24, text: "Alfred Faure" },
               { value: 25, text: "King Edward Point" }]
               $('#groups').ejDropDownList({
                   dataSource: groups,
                   fields: { value: "parentId" },
                   cascadeTo: 'countries'
               });
               $('#countries').ejDropDownList({
                   dataSource: countries,
                   fields: { value: "value" },
                   cascadeTo: 'capitalList',
                   enabled: false
               });
               $('#capitalList').ejDropDownList({
                   dataSource: capital,
                   fields: { value: "value" },
                   enabled: false
               });
           });
        </script>

    First two DropDownList cascaded based on the parentId, and then from second to third, cascading performed based on the value field.

    Multi-Level Cascading in JavaScript DropDown List

    Validation

    You can validate the DropDownList value on form submission by applying “validationRules” and “validationMessage” to the DropDownList.

    NOTE

    jquery.validate.min script file should be referred for validation, for more details, refer here.

    Validation Rules

    The validation rules help you to verify the selected text by adding validation attributes to the input element. This can be set by using validationRules property.

    Validation Messages

    You can set your own custom error message by using validationMessage property. To display the error message, specify the corresponding annotation attribute followed by the message to display.

    NOTE

    jQuery predefined error messages to that annotation attribute will be shown when this property is not defined. The below given example explain this behavior of ‘required’ attribute,

    When you initialize the DropDownList widget, it creates an input hidden element which is used to store the selected items value. Hence, the validation is performed based on the value stored in this hidden element.

    Required field and min value validation is demonstrated in the below given example.

  • HTML
  • <form id="form1">
        	<input type="text" id="dropdown1" />
       
        	<input type="submit" value="Validate" />
    	</form>
  • JAVASCRIPT
  • $.validator.setDefaults({
            ignore: [],
            errorClass: 'e-validation-error', // to get the error message on jQuery validation
            errorPlacement: function (error, element) {
                $(error).insertAfter(element.closest(".e-widget"));
            }
            // any other default options and/or rules
        });
        //If necessary, we can create custom rules as below. here method defined for min
        $.validator.addMethod("min",
            function (value, element, params) {
                if (!/Invalid|NaN/.test(value)) {
                    return parseInt(value) > params;
                }
            }, 'Must be greater than 30.');
        $(function() {
            var items = [{
                text: "10",
                value: 10
            }, {
                text: "20",
                value: 20
            }, {
                text: "30",
                value: 30
            }, {
                text: "40",
                value: 40
            }, {
                text: "50",
                value: 50
            }];
            $('#dropdown1').ejDropDownList({
                dataSource: items,
                fields: {
                    text: "text",
                    value: "value"
                },
                validationRules: {
                    required: true,
                    min: 30
                },
                validationMessage: {
                    required: "* Required",
                    min: "Select > 30"
                }
            });
        });

    Validation Messages in JavaScript DropDown List