23

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>
Tarek Saied
  • 6,482
  • 20
  • 67
  • 111
  • What do you mean by saying that `it creates another instance`? Show it in a JSfiddle maybe... – j809 Jul 06 '14 at 13:57
  • Sounds to me like a descriptive way to imply a duplicated select element. Am I wrong? – WLFree Dec 31 '22 at 18:59

5 Answers5

52

just change the trigger 'change' to 'selectmenuchange'

$('#filesA').on('selectmenuchange', function() {
    alert( 'x'); 
});
Baby
  • 5,062
  • 3
  • 30
  • 52
fakechrist
  • 536
  • 5
  • 2
7

Take a look here: http://jsfiddle.net/JLVSM/

Just change your code to:

$( "#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" ).addClass( "ui-menu-icons" );
j809
  • 1,499
  • 1
  • 12
  • 22
4

I had the same problem. Overcame it eventually with iconselectmenu instead of selectmenu

$( "#filesA" ).iconselectmenu({ change: function( event, ui ) { alert('x'); }});
user1528178
  • 81
  • 2
  • Basically, use this format and pick and pull from other events to get a basic idea of how it listens to different actions. Moreless a callback to the plugin. This is highly useful for AJAX! – WLFree Dec 31 '22 at 18:53
4

Or more specifically...

$(function() {
$.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 );
}
});

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

$('#filesB').iconselectmenu({
    change: function( event, ui) {
    alert('something has changed');
    }
});
});
user1528178
  • 81
  • 2
  • 3
    Please explain what your answer fixes. Dumping a code block isn't always a good idea. – Tomasz Kowalczyk Dec 16 '14 at 23:33
  • See what is nice here.. is that we actually see the event code as it would be. Not only that, but extensible. I recommend this solution, with little description lol – WLFree Dec 31 '22 at 18:51
3

I solved this way:

$.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({ change: function( event, ui ) { alert("Hi"); s}}).iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons" );
Luis Peña
  • 31
  • 2