I think this is what you need. I cut it out of some working code and simplifed a little, didn't check if the modification works thou, but the concept should.

<form> <select id="dropdown" multiple="multiple" onfocus="expandselect('dropdown');return false" onblur="depressselect('dropdown');return false"> <option disabled="disabled">Browser does not support dynamic option</option> </select> </form>

function el(id) { return document.getElementById(id); }

function expandselect(selections){ if(dynaopt){ selections=selections.split(','); for(var i in selections){ var select=selections[i] if(el(select)){ el(select).size=16; el(select).multiple=true; el(select).options[0].selected=false;//quirk with switching multiple=true/false } } } }//expandselected

function depressselect(selections){ if(dynaopt){ selections=selections.split(','); for(var i in selections){ var select=selections[i] if(el(select)){ el(select).size=1; el(select).multiple=false; el(select).options[0].selected=true;//select title } }//end for }//if(dynaopt }//depressselect

function setup(){ dynaopt=true; el('dropdown').options[el('dropdown').options.length-1]=null; if(el('dropdown').options[el('dropdown').options.length])dynaopt=false;//test if dynamic option available on browser if(dynaopt){ el('dropdown').options.length=0;//clear all available el('dropdown').options[0]=new Option('Dropdown box title',null); el('dropdown').options[0].disabled=true; var i=1; for(var option in options){ el('dropdown').options[i++]=new Option(option,option); } }//dynaopt }//end of setup

options=['test1','test2','test3'];