CODEWITHSUNDEEP
javascriptjqueryjquery-mobileselect-menu
Cicce19
Cicce19

Reputation: 153

detect change of selectmenu in jquery mobile 1.4

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.com/selectmenu/

Upvotes: 4

Views: 8775

Answers (5)

edomurcuk
edomurcuk

Reputation: 1

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

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

Upvotes: 0

Diego Noya
Diego Noya

Reputation: 11

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());
    });

Upvotes: 1

Bic
Bic

Reputation: 3134

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

Upvotes: 1

Alok Anand
Alok Anand

Reputation: 3356

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.

Upvotes: 4

Bic
Bic

Reputation: 3134

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());
});

Upvotes: 2

Related Questions