jQM 1.4 - Selectmenu

select option dynamically and refresh.

by Omar X

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css">
<script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>
<div data-role="content">
    <select id="ddl1">
        <option value="1">Text 1</option>
        <option value="2">Text 2</option>
        <option value="3">Text 3</option>
        <option value="4">Text 4</option>
    </select>
    <select id="ddl2">
        <option value="1">Text 1</option>
        <option value="2">Text 2</option>
        <option value="3">Text 3</option>
        <option value="4">Text 4</option>
    </select>
</div>

JavaScript

$(document).on('pageinit', function () {
    $(document).on('change', '#ddl1, #ddl2', function (e) {
        var selected = $(this).val();
        if (this.id == 'ddl1') {
            $('#ddl2 option[value="' + selected + '"]').prop('selected', true);
            $('#ddl2').selectmenu('refresh');
        } else {
            $('#ddl1 option[value="' + selected + '"]').prop('selected', true);
            $('#ddl1').selectmenu('refresh');
        }
    });
});