title: HTML Select Not Showing Selected Option After Refresh in Firefox
body: <p><strong>TL,DR:</strong> Firefox (and <em>only</em> Firefox) fails to display the right <code>select</code> child element as marked with <code>selected=&quot;selected&quot;</code> upon clean refresh of a page, even though it is correct in DOM (but only under certain conditions).</p>
  <p>(I do not believe this is a duplicate of <a href="https://stackoverflow.com/questions/12224000/html-select-correct-option-selected-in-dom-but-wrong-item-shown-in-firefox">HTML select, correct option selected in DOM, but wrong item shown in firefox</a> as I am <strong>not</strong> using <code>ember.js</code>.)</p>
  <hr />
  <h2>Background</h2>
  <p>I'm building a &quot;software management/update server&quot; in ASP.NET WebForms. It stores master copies of applications and serves downloads and updates via a simple API. Each application (or &quot;App&quot; as they're referred to in-code) has a <code>DeptID</code> and a <code>GroupID</code>, which are GUIDs, relating to respective <code>Dept</code> and <code>Group</code> tables. Each <code>Group</code> has a <code>DeptID</code> field also.</p>
  <p>On one particular page, used for editing a chosen software application's details, NON-postback requests (.e.g., <code>http://localhost/admin/app/edit.aspx?id=guid-here</code>) will result in calls to the database to populate field data on the page.</p>
  <p>In brief, the ASP.net runtime <code>Page_Load</code> event does the following:</p>
  <ul>
  <li>Ensures that this load <em><strong>is not</strong></em> a Postback
  <ul>
  <li>Verifies than an <code>id</code> parameter was provided in the query string
  <ul>
  <li>Populates options in the <code>ddlDept</code> <code>DropdownList</code> (renders as HTML <code>select</code> element) from the <code>Dept</code> table</li>
  <li>Pulls all fields from the App record from DB as matched by <code>id</code> into a <code>DataSet</code></li>
  <li>Populates options in the <code>ddlGroup</code> <code>DropdownList</code> (another <code>select</code>) from the <code>Group</code> table, matching the <code>DeptID</code> pulled from the <code>App</code> dataset</li>
  <li>Populates the data for all form fields from the <code>App</code> dataset</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p><strong>Important to Note:</strong> When you click <code>Save</code>, the page is posted back to the server and field data dumped into the database. If the save operation is successful, <em>the browser is instructed to redirect to the current page's URL</em> using <code>Response.Redirect(Request.Url.ToString)</code>, resulting in a &quot;clean load&quot; (non-postback load) of the page.</p>
  <hr />
  <h2>Expected Behavior:</h2>
  <p>After the page has been successfully saved, hitting F5 or clicking refresh should result in <em>another</em> clean load (non-postback) of the page, and all fields should be populated just like a direct URL hit on the page.</p>
  <hr />
  <h2>Actual Behavior:</h2>
  <p>After the page has been successfully saved, hitting F5 or clicking refresh reloads the page as a non-postback (verified in VS debug), but the <code>ddlGroup</code> select element renders the &quot;default&quot; / first item (&quot;Select One&quot;) instead of the item marked <code>selected=&quot;selected&quot;</code> in the DOM.</p>
  <p>I have stepped through <em>every single line</em> of VB code in debug — and when the server sends the page back after this &quot;post-save&quot; and supposedly &quot;clean&quot; load, the <code>ddlGroup</code> value is correct in code all the way out the door. Only in the browser, and only Firefox specifically, is the <em>displayed</em> value set to the wrong item, even though it's right in the DOM. Refreshing again doesn't help at all. When I try to <em>save</em> again, the RequiredField validator for <code>ddlGroup</code> complains that the field isn't valid, even though, again, it's supposedly right in DOM.</p>
  <p>This seems to me to be a very bad Firefox bug.</p>
  <p>Thoughts?</p>