How to get the value of a selected item when changing using jQueryUI Selectenu

Question

I use the "Menu Select" widget to display a list of states on the form:

<select name="state" id="state"> <option value = "">Select State</option> <option value = "Alabama">Alabama</option> <option value= "Alaska">Alaska</option> <option value= "Arizona">Arizona</option> <option value= "California">California</option> <option value= "Colorado">Colorado</option> <option value= "Connecticut">Connecticut</option> </select> 

In my script I have

  $( "#state" ).selectmenu(); 

Now I'm trying to send a notification about the value of the selected parameter. So I have this:

 $('select').on('change', function (e) { var optionSelected = $("option:selected", this); var valueSelected = this.value; alert(valueSelected); }); 

The problem is that for some reason this does not work when I use the jQueryUI selectmenu() function

When I delete one line, everything works as usual. As far as I understand, I need to include $( "#state" ).selectmenu(); to use the theme and functionality of the jQuery user interface.

Can anyone enlighten me on what could be the problem. Again, it works fine if I delete this selectmenu line.

Thanks!

Answer 1

jQuery UI hides your original <select> and creates custom widgets using dynamically inserted elements. That way, you no longer click on the original <option> that you provided, and the change event will not be raised on it.

Instead, it throws a selectmenuchange event when the selected item is changed. You can listen to it by passing the change function handler function when the plugin is initialized.

The item property of the second argument passed to the callback function refers to the selected item. You can access this value as shown below:

 $("#state").selectmenu({ change: function(event, ui) { alert(ui.item.value); } }); 

 <link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <select name="state" id="state"> <option value="">Select State</option> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <option value="Arizona">Arizona</option> <option value="California">California</option> <option value="Colorado">Colorado</option> <option value="Connecticut">Connecticut</option> </select> 

---

You can also manually listen to this event, for example:

 $('select').on('selectmenuchange', function (e,ui) { alert(ui.item.value); }); 

Answer 2

Initialize selectmenu with the specified callback selection:

Try it.

 $( "#state" ).selectmenu({ select: function( event, ui ) {} }); 

Or you can use an older version of the jquery-ui plugin. check if it supports selectmenu plugin.

try the following.

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>