javascript - jquery 下拉列表刷新

Question

我的下拉菜单有问题...我在页面上有一个下拉菜单和一个保存按钮..当您选择一个您想要的下拉菜单选项时..然后单击保存..该值将转到数据库并存储在那里..当你再次进入这个页面时......下拉菜单必须显示你上次保存的值......但我有一个问题..当我来到这个页面时......下拉菜单没有显示正确的值值..它显示第一个值..但是当我点击它时，在这个菜单中选择的选项是正确的..

我想也许我需要刷新它或其他东西？

这里是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>

这是 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>

如您所见.. 下拉列表显示“6 分钟”，但选择的是“1 小时”

Answer 1

不确定这是否可行，但是使用 localStorage 怎么样？实例:

• > 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>