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: .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?

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./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?

• javascript
• jquery
• html
• google-chrome

• 1 you click back, your page gets refreshed, you can get it by using GET method in URL and make a progress or sessions – Rafee Commented Apr 26, 2012 at 13:32

3 Answers 3

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

Because when browser back button is used it use the cache version of page but in your page there is dynamic data which got lost so browser does not find the previously selected value, You can set it by using jQuery:

$(document).ready(function(){
     $('#someselect').val('0');
});