e were recently making some modifications to a configuration options page.  The page was set up a type of table, where each record had its own row, and each column represented a different type of data that could be edited.  Some of the editable columns were dropdown lists which could have hundreds of different options to choose from.  If you had a large number of records, a massive chunk of the HTML content being shipped from the server was made up of the hundreds of identical options for each of these dropdowns. 

The saddest part is that we knew that most users would probably come in, adjust one or two settings, and leave all the rest of the drop downs untouched.  Without having to redesign the page, we wanted to find a way not have to ship so much needless data down to the client.

The solution seemed straightforward at first.  It was easy to write some javascript that would populate the dropdowns on the fly, so all we needed was to populate each dropdown with a single list item (the one the user should see selected).  When they would first click on it, the rest of the list would populate magically, and the user would never know the difference.  Onfocus, which fires when the user clicks or uses the keyboard to select the list seemed like the right event to use.


function InitList(selectList)
{
  // if the list is already populated, nothing left to do
  if (selectList.optons.length > 1) {
    return;
  }

<select onfocus="InitList(this);">
   <option value="5" selected>5</option>
</select>


Unfortunately we ran into a gotcha with IE, naturally.  We implemented the solution with an onfocus handler in the select list, which worked fine in Chrome and Firefox.  However, for IE, the dropdown wouldn’t open when you first clicked it.  You would have to click the dropdown a second time for it to start working.

The source of the problem turned out to be that when you change a select list in IE, it would automatically cancel the event that would trigger it to open.  What was happening was that the first click would populate the list but prevent the dropdown from appearing.  On the second click, the list was already populated and the javascript wouldn’t alter the elements, so the dropdown was able to proceed with its opening.

The solution for IE was to just use an onmousedown handler.  It fired before the actual opening of the dropdown was initiated, so IE didn’t feel the need to cancel the opening afterwards.

But, you still need the onfocus handler as well.  People using the keyboard to navigate the UI or a screen reader will never trigger an onmousedown event, so the javascript won’t fire.  A keyboard navigator would use the tab key to put the focus on the dropdown and then hit the spacebar to open it, and all they would see is the one item the list was originally populated with.

Fortunately, you can just use both.  The onmousedown will fire before the onfocus handler does, which will avoid problems with IE canceling the opening of the dropdown.  And the keyboard navigators will not have the problem of the dropdown opening getting canceled, since their focusing of the element was a separate action from opening it.


<select onfocus="InitList(this);" onmousedown="InitList(this);">
   <option value="5" selected>5</option>
</select>