jquery selectmenu widget

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

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.

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

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) {
}
});

[thePronto]

If I had watched this first, I would have saved a ton of Thanks!

[aaqilansari]

Kudvenkat sir, plz consider the mvc with web api for next video series.

[jeewanintube]

How about covering design pattern and web api in next series, Venkat sir??

[shashiranjan]

For responsive web application can we use bootstarp with asp.net.

[raj.blazers]

can we have select options each associated with an image?

[rvnlrd]

Thank you very much for your work, from your tutorials I learned a lot more things than on my university.

I got some feedback too, it would be really nice if you could include some real time  exercises after each tutorial so we can practice new skills by ourselves and combine them with knowledge from previous videos.

Example: Write ASP.NET application using X, Y, Z, with Ui similar to the one present on picture P and using widget W.