CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Vinod
Vinod

Reputation: 2311

Issue with onchange as a part of jquery mobile select menu?

I am unable to get selected value as a part of select menu, My code is as follows:

HTML:

<div data-role="main" class="ui-content">
<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>
</div>

Script:

<script type="text/javascript">
$('#select-choice-1').on('change', function() {
      alert( this.value );
    })
</script>

How can I get the value onChange function.

Upvotes: 0

Views: 2721

Answers (2)

Felix
Felix

Reputation: 38102

Try to wrap your code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function() {...}); to make sure your DOM elements have been loaded properly before executing your jQuery code:

$(function() {
    $('#select-choice-1').on('change', function() {
      alert( this.value );
    })
});

For jQuery mobile, it's better to use pagecreate event:

Triggered when the page has been created in the DOM (via ajax or other) and after all widgets have had an opportunity to enhance the contained markup.

$(document).on('pagecreate', function() {
    $('#select-choice-1').on('change', function() {
      alert( this.value );
    })
});

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

http://jsfiddle.net/QvG2R/1/

Use following syntax

$('#select-choice-1').change(function() {

      alert( this.value );
    });

Upvotes: 0

Related Questions