Question

I have a problem with dropdown… I hav a drop down on a page and a button save.. When you choose an option of drop down you want.. and click save.. the value goes to DB and stored there.. when you go on this page again… the drop down must show the value you saved previous time… but i have a problem.. when i come to this page.. dropdown don’t show me the correct value.. it shows me the first value.. but when i click on it the option that selected in this menu is right..

I think maybe i need to refresh it or something?

here is js->

    <script>
    $(document).ready(function() {
        var defaultValue = Settings.getDefaultTimespan();


        if (defaultValue == $('#opt' + defaultValue).val()) {

            $('#opt' + defaultValue).attr('selected','selected');  
        }

        $('#saveBtn').click(function() {

            Settings.setDefaultTimespan(parseInt($('#timeSettingsDropList').val()));

        });
    });
    </script>

Here is HTML->>

            <div id="timespanSettings">
                <table>
                    <tr>
                        <td style="width: 15%"><p>Default timespan:</p></td>
                        <td style="width: 85%"><select name="timeDropList" id="timeSettingsDropList">
                                <option id="opt0" value="0">6 Minutes</option>
                                <option id="opt1" value="1">10 Minutes</option>
                                <option id="opt2" value="2">15 Minutes</option>
                                <option id="opt3" value="3">30 Minutes</option>
                                <option id="opt4" value="4">1 Hour</option>
                        </select></td>
                    </tr>
                </table>

            </div>

As you can see.. dropdown shows “6 Minutes” but selcted is “1 Hour”

Answer 1

Not sure if this will work but what about using localStorage? Live Example:

• http://jsfiddle.net/phillpafford/trdYP/19/

JS:

var ts = localStorage.getItem('timeSelected');

var tsList = $('#timeSettingsDropList');
tsList[0].selectedIndex = ts;
tsList.selectmenu("refresh");

$('#timeSettingsDropList').change(function() {
    localStorage.setItem('timeSelected', $(this).val());
    ts = localStorage.getItem('timeSelected');
});

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <div id="timespanSettings">
            <table>
                <tr>
                    <td style="width: 15%"><p>Default timespan:</p></td>
                    <td style="width: 85%"><select name="timeDropList" id="timeSettingsDropList">
                            <option id="opt0" value="0">6 Minutes</option>
                            <option id="opt1" value="1">10 Minutes</option>
                            <option id="opt2" value="2">15 Minutes</option>
                            <option id="opt3" value="3">30 Minutes</option>
                            <option id="opt4" value="4">1 Hour</option>
                    </select></td>
                </tr>
            </table>
        </div>
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#page2">View Page 2</a></li> 
        </ul> 
    </div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">View Home Page</a></li> 
        </ul>
    </div>
</div>