I am revisiting JQM after not using it for a few versions.

I have a simple selectbox

<select name="current-option" id="current-option" class="current-option" data-native-menu="false">
        <option>Select Option</option>
        <option value="1">option 1</option>
        <option value="2">option 2</option>
    </select>

I want to be able to detect a change in this select box and then read it's value. It seems as though typical jquery methods don't work and I dont see an event for this in the api: /

I am revisiting JQM after not using it for a few versions.

I have a simple selectbox

<select name="current-option" id="current-option" class="current-option" data-native-menu="false">
        <option>Select Option</option>
        <option value="1">option 1</option>
        <option value="2">option 2</option>
    </select>

I want to be able to detect a change in this select box and then read it's value. It seems as though typical jquery methods don't work and I dont see an event for this in the api: http://api.jquerymobile./selectmenu/

• javascript
• jquery
• jquery-mobile
• select-menu

Share Improve this question Follow asked Feb 5, 2014 at 2:17 Cicce19Cicce19 15333 silver badges88 bronze badges 4

• Does it support standard events like onchange? – Bic Commented Feb 5, 2014 at 2:27
• 1 No. That is the problem. The 2 answers below work in a normal environment, but not in jQuery mobile 1.4. Once the page is initialized selectmenu actually bees a button and the select box is hidden. Onchange doesn't trigger. – Cicce19 Commented Feb 5, 2014 at 13:16
• The menu itself bees a button, or each option? – Bic Commented Feb 5, 2014 at 22:45
• Alok's answer works but has to be wrapped in an document-ready-function – user2718671 Commented Mar 26, 2015 at 7:59

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Ok, you want to know value of option selected after change event occurs; You should do following:--

$('#current-option').change(function () {
  var optionSelected = $(this).find('option:selected');
  //var optTextSelected = optionSelected.text();
  var optValueSelected = optionSelected.val();
});

I would request you to change name, id and class names for your select tag.

This isn't in a mobile environment, but it using the mobile plugins: Fiddle

HTML

<select name="current-option" id="current-option" class="current-option" data-native-menu="false">
    <option>Select Option</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>
<label id='thelabel'></label>

JavaScript

$('#current-option').change(function () {
    $('#thelabel').text($(this).val());
});

I took at look at the DOM after a select-menu is generated. It looks like the select-menu plugin will create a div with an id similar to the id of the select; in this case it would be current-option-listbox. The children of this div consist of several things, including the options. Based on this, I came up with the below solution:

var currentValue = ""; // keep track of the selected value

$('.ui-btn-inner', '#current-option-listbox').click(function () {
    if ('a', this).text() !== currentValue) {
        // the value changed - do stuff
        currentValue = $(this).children('a').text();
    }
});

This is heavily dependent on the plugin's render method remaining the same, or at the developer maintaining use of the plugin the code was designed around. I believe this will get you what you need.

Here is a Fiddle Demo

The event you need is 'selectmenuchange', jQuery mobile triggers this event for selects instead of 'change'.

It should go like this:

    $('#current-option').on('selectmenuchange',function () {
       $('#thelabel').text($(this).val());
    });

normally the code below should work. But i'm not sure. Try please.

$('#current-option').change(function () {
   $('#thelabel').text($(this).val());
});