Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery selectmenu widget

Suggested Videos
Part 84 - asp.net multiple file upload with progress bar
Part 85 - jquery menu widget
Part 86 - jQuery dynamic menu from database in asp.net



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>

Without jQuery, the above HTML will be rendered as shown below
html select element example

To use the jQuery selectmenu widget, call jQuery selectmenu() function on the select element
$('#selectMenu').selectmenu();

jquery select menu example

Select element with optgroup elements
select optgroup example

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

jquery select button icon

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

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.