Monday, 8 June 2020

how to change icons in dropdown meni

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