Autosize <Select> - Javascript / DHTML / Ajax Forum

I have an array of values that I need to populate a dropdownlist (read <Select>) at runtime. In the name of performance (and because there's dozens of these drop down lists on the page) each Select object is being populated on mouse over.

Given that I have my array already populated, is there an easy way to set the width of the drop down lists given the data in my array? My initial thought was to dump the array contents into a DIV and grab the width, applying it to the style for each of the SELECT tags. Can anyone think of anything more elegant?

Cheers

pronerd

Expert

300 Posts

May 15th, 2008
10:02 PM
#2

Re: Autosize <Select>

Quote:

Originally Posted by balabaster

Can anyone think of anything more elegant?

Yes. You can use the innerHTML attribute of the select tag to create the option tags inside the select tag. Or you can use the DOM JavaScript API to create option elements and attach them as children of the select tag.

This code is untested, so it may have some bugs, but it should be close to what you need.

Code: ( text )

<select id="dynamicDropDown" name="dynamicDropDown" onmouseover="populate(this)" >
</select>
<script>
var options = new Array();
options[0] = "one";
options[1] = "two";
options[2] = "three";
options[3] = "four";
function populate(selectTag) {
var optHTML = "";
for( int i = 0; i < options.length; i++ ) {
optHTML += " <option value=\""+options[i]+"\" >"+options[i]+"</option>";
}
selectTag.innerHTML = optHTML;
}
</script>

Code: ( text )

<select id="dynamicDropDown" name="dynamicDropDown" onmouseover="populate(this)" >
</select>
<script>
var options = new Array();
options[0] = "one";
options[1] = "two";
options[2] = "three";
options[3] = "four";
function populate(selectTag) {
for( int i = 0; i < options.length; i++ ) {
var optTag = document.createElement("option");
optTag.setAttribute("value", options[i]);
optTag.setAttribute("name", options[i]);
selectTag.appendChild(opt);
}
}
</script>