jQuery UI Selectmenu events bind

Question

Im using JQuery UI Selectmenu widget - http://wiki.jqueryui.com/w/page/12138056/Selectmenu

Im trying to bind change event. But it does not work:

$(function() {
  $('select#items').selectmenu();
  $('select#items').bind("change",function(){
     alert('x');
   });  
});

Any ideas ?

score 13 · Accepted Answer · answered Feb 08 '12 at 14:38

13

I found an answer. So here it is:

$(function() {      
        $('#items').selectmenu({
            change: function() {
                alert('x');
            }
        });
});

answered Feb 08 '12 at 14:38

Bounce

2,066
6
34
65

It is also possible to add an onchange behaviour later on, after the selectmenu has been initiated. Simply select the items that have selectmenu behaviour and edit the change property e.g. `$('#items').change(function() {...})` – berliner Aug 14 '12 at 19:39
@berliner this solution does not work for me... Bounce your solution works only when opening the page.. Not when changing the select.. – Maxbester Jan 23 '13 at 13:45
two years later... is this the only solution? In my project are tons of selectboxes with existing change()-event and all not working with selectmenu. – user706420 Jul 07 '14 at 07:02
@user706420 `$('body').on('selectmenuchange', 'select', function() { $(this).trigger('change') })`? – Petah Aug 06 '14 at 02:18

score 10 · Answer 2 · edited Aug 05 '14 at 16:44

10

Since this came up first on Google and didn't give me the answer I was looking for, having looked at the jquery ui code it can be done after initially setting up the select menu, binding to the selectmenuchange event as below. Worked for me anyway.

$('#items').selectmenu();

$('#items').on('selectmenuchange',function() {

    alert("hello world");

});

edited Aug 05 '14 at 16:44

demongolem

9,474
36
90
105

answered Aug 05 '14 at 16:42

steve16351

5,372
2
16
29

score 1 · Answer 3 · answered Jan 11 '15 at 22:07

I was just pulling my hair out about this and figured out a easy way of doing it. You basically have to tell the selectmenu to trigger the change event.

When you setup your selectmenu use the close method like so:

//Set select box to jQuery UI selectmenu
$('select').selectmenu({
   close: function(event, ui){
      //Fire change event
      $(this).change();
   }
});

Then define your change event like this:

$('#container').on('change', 'select', function(e){
   alert('x');
});

jQuery UI Selectmenu events bind

3 Answers3