Question

我有一个下拉列表。只要用户更改其选定值，就会重新加载页面。

html看起来像这样：

<select id="period" name="MyViewModel.Period">
    <option selected="selected" value="/Home/11-2012/Index">November 2012</option>
    <option value="/Home/10-2012/Index">October 2012</option>
</select>

jquery脚本如下所示：

<script type="text/javascript">
    $(document).ready(function () {
        $('select#period').change(function () {
            var temp = $(this).find('option:selected').val();
            document.location.href = temp;
        });
    });
</script>

一切正常，但如果用户在加载原始页面时使用浏览器后退按钮，则会更改所选值。这肯定会让用户感到困惑。

那么，通过浏览器后退按钮导航到上一页时，是否可以避免更改下拉列表值？

P.S。：这个ASP.NET DropdownList autopostback and Browser Back Button看起来像一个类似的问题，但它没有答案，只是想使用java脚本重新分配值。但我没有抓住如何...我希望关闭缓存并不是唯一的出路。我最好放弃使用下拉列表然后......

This is我原来的帖子，这让我想到了这个问题。

Answer 1

只要用户更改其选定值，就会重新加载页面。

如果您可以使用ajax重新加载页面内容，那么您就不会遇到此问题。

Answer 2

这是解决我的问题的解决方法。

我添加了一个显示当前日期的链接，并隐藏了下拉列表：

HTML：

<select id="period_s" name="_WorkerInfoViewModel.Period">
    <option value="url1">November 2012</option>
    <option selected="selected" value="url2">October 2012.</option>
</select>
<a id="period_a" data="url2">October 2012</a>

CSS：

select#period_s {
display:none;
}

a#period_a {
cursor:pointer;
}

然后我添加了一个jquery脚本来切换下拉列表并更改下拉列表中的选定值。选定的值更改后，我再次隐藏列表：

<script type="text/javascript">
    $(document).ready(function () {
        $('select#period_s').change(function () {
            var temp = $(this).find('option:selected').val();                
            $(this).toggle();
            document.location.href = temp;
        });
        $('a#period_a').click(function () {
            $('select#period_s').val($(this).attr('data'));
            $('select#period_s').toggle();
        });
    });
</script>

在有人提供更好的解决方案之前，我会将此标记为答案。

使用浏览器后退按钮导航时，不会返回下拉列表选定值

2 个答案: