I have a <select>
tag that contains a single <option>
element:
<select id="someselect">
<option value="2">B</option>
</select>
The single <option>
is later replaced using jQuery. The new list of options always contains the old option:
selected = $('#someselect').val();
$('#someselect').html('<option value="1">A</option><option value="2">B</option>').val(selected);
This works as expected. However, when navigating away from the webpage in Google Chrome and then clicking the back button, something weird happens. The select tag is back to its initial state (makes sense), but the single <option>
element is not selected!
What is the cause of this behavior in Chrome?
I've created a minimal working example: http://dl.dropbox.com/u/27566470/backdemo.html
Initially there is only a single <option>
. First click on "click" to replace the options (but keep the 'B' option selected), then click on "Google" to navigate away, and then use the back button of Chrome to see the <select>
tag with only a single option that is not selected.
Edit: to clarify, I'm not interested in how to fix this. I'm curious why Chrome works like this. Serving the original (unmodified) DOM after using the back button makes sense, but why is the only select option not selected?
Google ChromeOpen the Chrome menu and select Settings. Then, select Advanced > Reset and clean up > Restore settings to their original defaults.
You may have the frustrating gesture-based navigation turned on (by default) and not did not know you have another option. Go to settings, search g, select gestures, then system navigation, and then 3-button.
To disable the browser "Back" button for a specific page: Open the "UI" tab of the page description window ( "Description" option in the page popup menu). In the "Options" area, for the option "Browser "Back" button", select "Forbidden".
To answer my own question, it seems to be a Chromium bug. I've filed a bug that is currently confirmed and triaged: http://code.google.com/p/chromium/issues/detail?id=125509
So hopefully this should be fixed in the future :)
Because every browser that navigates outside the document (# is still inside) when navigates back they load the server cached version, and that said Chrome modifies the DOM when you select an option taking away the selected
attribute to the selected option element and when you get back it loads again with the selected
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With