Javascript jquery滴列表刷新

我的下拉列表有问题。。。我有一个下拉页面和一个保存按钮。。当您选择所需的下拉菜单选项时。。然后单击“保存”。。该值转到DB并存储在那里。。当你再次进入这一页时。。。下拉列表必须显示上次保存的值。。。但是我有个问题。。当我来到这一页时。。下拉列表不显示正确的值。。它向我显示了第一个值。。但是当我点击它时，在这个菜单中选择的选项是正确的

我想也许我需要重新整理一下

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

$（文档）.ready（函数（）{
var defaultValue=Settings.getDefaultTimespan（）；
if（defaultValue=$（'#opt'+defaultValue）.val（））{
$（'#opt'+defaultValue）.attr（'selected'，'selected'）；
}
$（'#saveBtn'）。单击（函数（）{
Settings.setDefaultTimespan（parseInt（$（“#timeSettingsDropList”）.val（））；
});
});

这里是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分钟
10分钟
15分钟
30分钟
1小时

如你所见。。下拉列表显示“6分钟”，但选择“1小时”

---

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

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

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

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

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

        });
    });

---

不确定这是否可行，但使用本地存储如何？实例：

JS:

HTML:

默认时间跨度：

6分钟
10分钟
15分钟
30分钟
1小时

导航



导航

ou。。我试过了。。但是结果是一样的，我的意思是数值在变化。。但是下拉列表中的文本don't您可能也保留了旧代码，这实际上是在设置option的selected属性。请检查我编辑的答案，我已经写了完整的代码。谢谢到底发生了什么？你能解释一下吗？我保存了值，例如“2”（15分钟）。。。然后退出该页面。。我回来的时候。。在下拉列表中显示“6分钟”（第一个值）。。但是当我点击这个下拉菜单…打开完整的值列表。。。并且有正确的值。这取决于它返回的设置。getDefaultTimespan（）。请看一看这个方法。也许我遗漏了这个问题，但jQM是通过解题来实现的，不是吗？现场演示：选择一个时间，导航到第2页并返回主页。值应为您选择的值。我需要将数据保存在DB中，因为我需要在另一个地方对其进行更改。。这是设置页面。。其中必须选择timespan的默认值。。如果您退出应用程序，它将不起作用。。。然后再去那里。好的，谢谢。这很有帮助->>$（“#timeSettingsDropList”）。选择菜单（“刷新”）；

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');
});

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