HTML Shortcut: Dynamically populate a select list drop down when it is first clicked

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;
  }

  selectList.optons.length = 0;
  var currentSelection = selectList.value;

  // sample code for population a list of 10 elements
  for (var i = 0; i < 10; i++) {
      selectList.options[i] = new Option(i, i, false, i == currentSelection);
  }
}

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

 

This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

2 Responses to HTML Shortcut: Dynamically populate a select list drop down when it is first clicked

  1. Luciano Santos says:

    Hi! Thanks for the tip, this solves the problem for IE8, in IE7 i didn’t find any problem populating the select in the focus event. Have you run into this issue on IE9? This is really a pain in the ass, tried onfocus and some similar events like onactivate, besides trying onmousedown and even other mouse events..

  2. Your mum says:

    Doesn’t work on any of the latest browsers except FireFox I’m afraid.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s