Autosize <Select>

[balabaster]

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]

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.

[HTML]

<select id="dynamicDrop Down" name="dynamicDr opDown" onmouseover="po pulate(this)" >
</select>

<script>
var options = new Array();

options[0] = "one";
options[1] = "two";
options[2] = "three";
options[3] = "four";

function populate(select Tag) {

var optHTML = "";

for( int i = 0; i < options.length; i++ ) {
optHTML += " <option value=\""+optio ns[i]+"\" >"+options[i]+"</option>";
}

selectTag.inner HTML = optHTML;
}

</script>

[/HTML]



or





[HTML]

<select id="dynamicDrop Down" name="dynamicDr opDown" onmouseover="po pulate(this)" >
</select>

<script>
var options = new Array();

options[0] = "one";
options[1] = "two";
options[2] = "three";
options[3] = "four";

function populate(select Tag) {

for( int i = 0; i < options.length; i++ ) {
var optTag = document.create Element("option ");
optTag.setAttri bute("value", options[i]);
optTag.setAttri bute("name", options[i]);
selectTag.appen dChild(opt);
}

}

</script>

[/HTML]

[rnd me]

Yes. You can use the innerHTML attribute of the select tag to create the option tags inside the select tag.

ie6 will screw up combos populated that way...

faster and easier:
var tmpOp = new Option("text", "value");

[acoder]

Yet another alternative:
[code=javascript]var opt = document.create Element('option ');
opt.text = "one";
opt.value = "one";
// then add
try {
selObj.add(y,nu ll); // standards compliant
} catch (exc) {
selObj.add(y); // IE only
}[/code]