Possible bug with value modification and Back button on Chrome

Chrome Version (type about:Version 28.0.1491.0 canary and 26.0.1410.65 Google Chrome): Operating System (Mac OS X Mountain Lion): The problem only occurs with Chrome Canary and regular Google Chrome. There is no issue with Firefox, Safari nor IE9 (Windows tested) latest versions.

The code below changes all the stateBill values to be the same as the text values.

Then submit it to another page and click Back button of browser page. The selected option is NOT visible (ie it shows blank) on the drop down, even though the html source still shows it selected.

If I don't execute the jquery function and submit and click Back on browser, the selected option text appears in the dropdown list correctly.

Maybe its jquery on chrome or maybe its javascript on Chrome issue.

Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form target="_self" action="http://google.com">
    Click Submit. When it goes to google, Click Back button of browser.<br/>
    Will see that drop down is empty!
    <!-- Abbreviated states list -->
    <select name="stateBill" class="required" id="stateBill">
        <option value="">- Select -</option>
        <option value="1">Alabama</option>
        <option value="2">Alaska</option>
        <option value="3" >American Samoa</option>
        <option value="4" selected="selected">Arizona</option>
        <option value="5">Arkansas</option>
    </select>
    <input type="submit" value="Submit">
<form>
</body>
<script>
$(function(){
    // Change all state values to be the same as the state text.
    var text;
    $("#stateBill option:gt(0)").each(function(i,j){
        text=$(j).text();
        $(j).val(text);
    }); 
})
</script>
<html>

I was having the same issue, and came across this issue while searching Google. For anyone else stumbling across this: I fixed the issue by setting 'autocomplete="off"' on the form. Of course, this may not be desirable for all situations.

I'm running Chrome 30.0.1599.101 on OSX 10.9. The web site is built using the Wicket framework (which uses jQuery for AJAX).

I found an simple workaround by creating a hidden text and just before a submit or change set it to the selected value.

Simple jQuery workaround.

$(document).ready(function () {
    $("select").each(function () {
        $(this).val($(this).find('option[selected]').val());
    });
})

来源：https://stackoverflow.com/questions/16270349/possible-bug-with-selectoption-value-modification-and-back-button-on-chrome

标签

google-chrome

button

back

Possible bug with <select><option> value modification and Back button on Chrome