jquery selectmenu widget
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
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.
/ @aarvikitchen5572
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);
}
});
On this page of the site you can watch the video online jquery selectmenu widget with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 09 July 2015, share the link with friends and acquaintances, this video has already been watched 21,960 times on youtube and it was liked by 103 viewers. Enjoy your viewing!
