| jquery select
menu widget |
|
|
|
|
|
| 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"> |
sub groups |
| <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. |
|
we have default icon to drop down, if we want to change u can use below
procedure |
| You can change button icon
using the icons option |
|
| $('#selectMenu').selectmenu({ |
which one we are going to select, it will get the arrow at end |
| 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({ |
retrieve the selected item usin galert |
| select: function (event, ui) { |
|
| alert('Label = ' + ui.item.label + '
' |
|
| + 'Value = ' + ui.item.value); |
|
| } |
|
| }); |
|
| |
|
|
|
|
|
|
|
|
|
| selectmenu |
| icons |
| select |
| item.label |
| ui.ite..value |
| how to change icons
in dropdown meni |
| how to get the label and value of option
print in html |
|
|
|
|
|
|
|
|
|
|
No comments:
Post a Comment