Example 1, the usual way.

This example uses the createElement and appendChild methods to create a selection list with 2000 options var select = document . createElement ( "select" ); for ( var i = 0 ; i < 2000 ; i ++) { var option = document . createElement ( "option" ); option . text = i ; select . appendChild ( option ); } container . appendChild ( select ); Speed test: Browser Time IE 6 1802 ms IE 7 1953 ms IE 8 594 ms Firefox 90 ms Opera 31 ms Safari 5 ms Remarks: The example does not work properly in Internet Explorer, it creates a selection list with 2000 empty options

Example 2

This example uses the createElement and add methods to create a selection list with 2000 options var select = document . createElement ( "select" ); for ( var i = 0 ; i < 2000 ; i ++) { var option = document . createElement ( "option" ); option . text = i ; select . options . add ( option ); } container . appendChild ( select ); Speed test: Browser Time IE 6 2703 ms IE 7 3000 ms IE 8 984 ms Firefox 366 ms Opera 234 ms Safari 68 ms

Example 3

This example uses the innerHTML property to create a selection list with 2000 options var select = "<select>" ; for ( var i = 0 ; i < 2000 ; i ++) { select += "<option>" + i + "</option>" ; } select += "</select>" ; container . innerHTML += select ; Speed test: Browser Time IE 6 70 ms IE 7 78 ms IE 8 15 ms Firefox 59 ms Opera 16 ms Safari 17 ms

Sometimes a selection list needs to be filled dynamically depending on the state of another control (e.g. when the user selects a country and a selection list must contain the cities in this country, or when the user selects a singer and a selection list must contain his/her songs).Unfortunately, the usual way of creating a selection list with a large number of items is quite slow in Internet Explorer. In the followings, you can find solutions and speed tests for the problem (the speed test was run on an average computer).

The solution implemented by Example 3 works much more faster than the previous ones in Internet Explorer and it is also fast in other browsers. Unfortunately, the processing time grows drastically for greater number of options in Internet Explorer. This behavior is independent of the select and option elements, it is based on the speed of string concatenations.

But how can strings be concatenated faster? The following examples answer that question.

Example 4

This example same as the previous one, but it creates a selection list with 8000 options var select = "<select>" ; for ( var i = 0 ; i < 8000 ; i ++) { select += "<option>" + i + "</option>" ; } select += "</select>" ; container . innerHTML += select ; Speed test: Browser Time IE 6 961 ms IE 7 1781 ms IE 8 47 ms Firefox 242 ms Opera 47 ms Safari 67 ms

Example 5