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

jquery selectmenu widget

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

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>

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

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 label="India">
        <option value="3">New Delhi</option>
        <option value="4">Bangalore</option>

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
    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.
    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.

    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.