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>

Answer 2

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

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

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

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

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

        });
    });