Question

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?

Answer 1

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 🙂