How to get the value of selected item on change using jQueryUI Selectenu

Question

I am using the Select Menu widget to display a list of states within a 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, what I am trying to do is send out an alert of the value of the selected option. So I have this:

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

The issue is that for some reason none of that is working when I use the JQueryUI function selectmenu()

When I remove that one line, everything functions as normal. It was my understanding that I need to include $( "#state" ).selectmenu(); in order to utilize the JQuery UI theme and functionality.

Can anyone enlighten me on what the issue may be. Again, it works fine if I remove that selectmenu line.

Thanks!

T J · Accepted Answer · 2014-11-02T09:47:48.083

jQuery UI hides your original <select> and creates custom widjets using dynamically injected elements. So you are no longer clicking on the original <option>'s you provided, and no change event will be triggered on it.

Instead, it emits a selectmenuchange event when the selected item is changed . You can listen to it by passing the handler function to the change option while initializing the plugin.

The item property of second argument passed to the callback function refers to the item you've selected. You can access it's 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 like:

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

Ronny K · Answer 2 · 2014-11-02T05:58:51.233

0

Initialize the selectmenu with the select callback specified:

Try this.

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

Or You might be using an older version of the jquery-ui plugin. please check if it supports the 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>

edited Nov 02 '14 at 05:58

answered Nov 02 '14 at 05:50

Ronny K

3,641
4
33
43

Hey Ronny - I tried that and it still doesn't make the select script work :/ Should I be putting the script within the select: function( event, ui ) {} braces? – user3785198 Nov 02 '14 at 05:52
I changed the JQuery-UI link and it still doesn't work. I am linking my theme to and I am linking the JQuery to – user3785198 Nov 02 '14 at 06:11
The theme is showing up properly with the select menu, the functionality is just not working. You can see the issue at: http://secretswith.me/newindex.php - The select menu without the JQuery UI checks the database and displays properly. The one with the UI doesn't. – user3785198 Nov 02 '14 at 06:12

How to get the value of selected item on change using jQueryUI Selectenu

2 Answers2