jQuery tutorial for beginners - jquery selectmenu widget

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-selectmenu-widget.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 In this video we will discuss jQuery selectmenu widget with examples. jQuery selectmenu duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control. <select id="selectMenu" style="width:200px"> <option value="1">USA</option> <option value="2" selected="selected">India</option> <option value="3">UK</option> <option value="4">Australia</option> <option value="5">Canada</option> </select> To use the jQuery selectmenu widget, call jQuery selectmenu() function on the select element $('#selectMenu').selectmenu(); Select element with optgroup elements : The optgroup element is used to group related options in a drop-down list. In this example, we are grouping cities by country. You can only select the elements of a group but not the group itself. <select id="selectMenu"> <optgroup label="USA"> <option value="1">New York</option> <option value="2">Los Angeles</option> </optgroup> <optgroup label="India"> <option value="3">New Delhi</option> <option value="4">Bangalore</option> </optgroup> </select> Dropdownlist button icon : Button icon is the image that you see on the right handside of the dropdownlist. The default button icon is ui-icon-triangle-1-s. You can change button icon using the icons option $('#selectMenu').selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } }); List of all jQuery icons http://api.jqueryui.com/theming/icons To control the width of the selectmenu, use width option. The width is in pixels. $('#selectMenu').selectmenu({ width : 200 }); How to retrieve the selected item value and label : Use the select event of the selectmenu. This event is raised when an item is selected. $('#selectMenu').selectmenu({ select: function (event, ui) { alert('Label = ' + ui.item.label + ' ' + 'Value = ' + ui.item.value); } });