Search code examples
jqueryjquery-uiselect-menu

How to handle jQuery UI Selectmenu change event


i use jquery ui select menu with custom render option

how i can handle the change event ?

i try

   $('#filesA').on('change', function() {
  alert( 'x'); 
});

but its not working with jQuery UI Selectmenu

and also i try

$( "#filesA" ).selectmenu({
  change: function( event, ui ) {}
});

it's working but it's create another select menu instance !!

enter image description here

my js code

$( document ).ready(function() {

  $( "#filesA" ).selectmenu({ change: function( event, ui ) { alert('x'); }});



$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
                            _renderItem: function( ul, item ) {
                                var li = $( "<li>", { text: item.label } );

                                if ( item.disabled ) {
                                    li.addClass( "ui-state-disabled" );
                                }

                                $( "<span>", {
                                    style: item.element.attr( "data-style" ),
                                    "class": "ui-icon " + item.element.attr( "data-class" )
                                })
                                .appendTo( li );

                                return li.appendTo( ul );
                            }
                        });

                        $( "#filesA" )
                        .iconselectmenu()
                        .iconselectmenu( "menuWidget" )
                        .addClass( "ui-menu-icons" );




});

and my html code

                <label class="langLabel" for="filesA">Select your language:</label>
                <select name="filesA" id="filesA">
                    <option value="lan1">Test Lang1</option>
                    <option value="lan2">Test Lang2</option>
                    <option value="lan3">Test Lang3</option>
                    <option value="lan4">Test Lang4</option>
                    <option value="lan5">Test Lang5</option>
                 </select>

Solution

  • just change the trigger 'change' to 'selectmenuchange'

    $('#filesA').on('selectmenuchange', function() {
        alert( 'x'); 
    });