jquery droplist refresh

Question

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

我想也许我需要更新它或什么？

这里是js-＆gt;

    <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-＆gt;＆gt;

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

Answer 2

要在下拉列表中选择选项，您只需传递val方法中的值，如下所示。

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

        $("#timeSettingsDropList").val(defaultValue);

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

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

        });
    });