Question

I’ve got a dropdownlist. As soon as user changes its selected value, the page is reloaded.

The html looks like this:

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

The jquery script looks like this:

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

Everything works great, but if a user uses browser Back button when the original page is loaded back, it has the selected value changed. It surely confuses a user.

So, is it possible to avoid having dropdownlist value changed when navigating to a previous page through browser back button?

P.S.: this ASP.NET DropdownList autopostback and Browser Back Button looks like a similar problem, but it has no answer, only an idea to use java script to reassign the value. But I failed to catch how… I hope turning off caching is not the only way out. I’d better give up using dropdown list then…

This is my original post, which brought me to this question.

Answer 1

This is a workaround solving my problem.

I added a link, displaying current date, and hid the dropdownlist:

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

Then I added a jquery script toggling the dropdown list and changing the selected value in the dropdownlist. After the selected value has changed I hide the list again:

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

Until someone gives a better solution, I’ll mark this as the answer.