Firefox not refreshing select tag on page refresh

Question

I've run into a problem where I have a select tag that the user would use to select a brand of phone and the page using jquery would then just display those phones.

Thanks to the help of the people on stack overflow this now works great on every browser but firefox. For some reason when I refresh the page the select tag shows the last selected option but the page shows all phones available as designed. Does anyone have any suggestions or advice on getting firefox to refresh the select tag? I can't show it on js.fiddle because it doesn't happen there so here is a link:

http://davidarabis.com/test/test.html

And here is the code:

<select class="manufacturers">
    <option class="selected" value="all">All</option>
    <option value="motorola">Motorola</option>
    <option value="htc">HTC</option>
    <option value="lg">LG</option>
    <option value="samsung">Samsung</option>
    <option value="kyocera">Kyocera</option>
</select>

<div class="scroll-content">
    <ul class="manulist motorola">
        <li><a href="#">Motorola Triumph</a></li>
    </ul>
    <ul class="manulist htc">
        <li><a href="#">HTC WILDFIRE S</a></li>
    </ul>
    <ul class="manulist lg">
        <li><a href="#">LG Optimus Slider</a></li>
        <li><a href="#">LG Optimus V</a></li>
        <li><a href="#">LG Rumor Touch</a></li>
        <li><a href="#">LG Rumor 2</a></li>
        <li><a href="#">LG 101</a></li>
    </ul>
    <ul class="manulist samsung">
        <li><a href="#">Samsung Intercept</a></li>
        <li><a href="#">Samsung Restore</a></li>
        <li><a href="#">Samsung M575</a></li>
    </ul>
</div>

The jquery:

$(document).ready(function() {

    $('.manufacturers').change(function() {
        var selected = $(this).find(':selected');
        $('ul.manulist').hide();
        if ($(this).val() == 'all') {
            $('.scroll-content ul').show();
        } else {
            $('.' + selected.val()).show();
            $('.optionvalue').html(selected.html()).attr(
                    'class', 'optionvalue ' + selected.val());
        }
    });
});

Thanks in advance for any advice or help.

Answer 1

FireFox will cache form values (including the selected value of a select box), when the refresh mechanism is activated normally (F5). However, if a user chooses to perform hard-refresh (Ctrl+F5), these values won't be fetched from the cache and your code will work as expected.

As users will act on their own will, you have to provide a solution to cover both cases. This can be done by taking several approaches:

• Handle each page refresh: add some reset code to set the default selected state inside the window.onbeforeunload event listener.
• Add that code at the beginning of the DOM ready handler.
• Use cookies, as described in this post from Ted Pavlic's blog, to detect the page refresh and act on it (placing the same code there).
• Set no-cache headers on the server-side, thus forcing the relevant resources to be fetched.

References

• window.onbeforeunload on Mozilla Developer Network
• A post on stackoverflow on the FireFox's form values caching
• A blog post on the feature from 2009
• Yet another blog post on the feature dating 2008

Note: It has been suggested on the linked SO post, as well as here in the comments, to simply turn autocomplete off. This, however, is not the best solution — for two reasons: a. Compatibility: autocomplete is an HTML5 attribute, so we're restricting our implementation of choice, and b. Semantics: The aim is to handle the case of a page refresh. The autocomplete is intended for controlling session history caching and manage prompting of the form controls. Should this implementation change in the future, that solution will break.

Answer 2

I think I have more simple solution. Why not to set the select back to index 0 when document is ready? It could look like this:

$('.manufacturers').prop('selectedIndex',0);

So your script could look like this:

$(document).ready(function() {

    $('.manufacturers').prop('selectedIndex',0);

    $('.manufacturers').change(function() {
        var selected = $(this).find(':selected');
        $('ul.manulist').hide();
        if ($(this).val() == 'all') {
            $('.scroll-content ul').show();
        } else {
            $('.' + selected.val()).show();
            $('.optionvalue').html(selected.html()).attr(
                    'class', 'optionvalue ' + selected.val());
        }
    });
});

And after reload the select will be back to the first position.

Answer 3

If your select tag is inside a form you can just add the attribute autocomplete="off" to it and it will behave as expected.