Drop down selext box options using external JS not working in IE

[sewerized]

Hello all,

I'm having a problem with a user preferences form I'm creating. I want
to use dynamic dropdown SELECT boxes for this so my page doesn't get
cluttered with 100000 links.

Since I have 10000 Options embedded in the SELECT tags, I'm using an
External JS file to display them. I'm using these same Options for
different SELECT tags, so they can be "re-used (or looped)", instead of
writing them over and over again.

This is working PERFECTLY in Mozilla/Firefox 1.5 and Opera 9. The
dropdown boxes display exactly how I want, they render just the same as
they would in a normal embedded Options list. However, Internet
Explorer 5, 5.5 and 6.0 (and maybe also 7, haven't tested this) all
render the Options "outside" of the dropdown boxes, as plain text, so
they can't be clicked (and thus no value can be set). For some weird
reason IE CAN read embedded JS between SELECT tags, but not external???

Here's the example I'm using:

<form id="MyForm">

<select name='colorset'
onchange='addst yle(\"body\",th is.options[this.selectedIn dex].value,
this.id+\"_\"+t his.selectedInd ex);'>

<script type='text/javascript' src='colorjs.js '></script>

</select>

</form>

External .JS file:
document.write( '<OPTION value=\"color:# ffffff\">White</OPTION>');
document.write( '<OPTION value=\"color:# 003366\">Darkbl ue</OPTION>');
The above example will NOT work in IE. It simply renders a blank
dropdown with the options outside of the dropdown box

However, the following example DOES work in IE, this time it's embedded
and NOT external.

<form id="MyForm">

<select name='colorset'
onchange='addst yle(\"body\",th is.options[this.selectedIn dex].value,
this.id+\"_\"+t his.selectedInd ex);'>

<script type='text/javascript'docu ment.write('<OP TION
value=\"color:# ffffff\">White</OPTION>'); document.write( '<OPTION
value=\"color:# 003366\">Darkbl ue</OPTION>') </script>

</select>

</form>

Is there any workaround for IE? I have like 100000 options, embedding
it normally would result in an at least 2mb JS file (which we don't
want, takes ages to load). I've already tried several other methods,
but to no avail.

Any help would be GREATLY appreciated...

[Matt Kruse]

se*******@hotma il.com wrote:

Since I have 10000 Options embedded in the SELECT tags

IMO, that's mistake #1.
10,000 options in a select tag is not user-friendly.
Consider an alternate way to achieve your goal.

<select name='colorset'
onchange='addst yle(\"body\",th is.options[this.selectedIn dex].value,
this.id+\"_\"+t his.selectedInd ex);'>
<script type='text/javascript' src='colorjs.js '></script>
</select>

Instead, inside the select make a function call:
<script type="text/javascript">
writeOptions();
</script>

Then inside your external script, wrap all the document.write( ) calls in a
function.

Also, many write() calls may be quite a bit slower than building up one
string and doing a write() once.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[sewerized]

Thank you so mutch! It's working perfectly crossbrowser now. Another
"Aha!" moment for me there, not so expierenced with JS (yet :-P).

Matt Kruse wrote:

>IMO, that's mistake #1.
10,000 options in a select tag is not user-friendly.
Consider an alternate way to achieve your goal.

With "10000 options" I meant the same options being used over and over
again, not 10000 individual options. Now I can call one group of
options everytime I want it to appear in a different SELECT tag, so it
loads fast and properly.

Matt Kruse wrote:

Also, many write() calls may be quite a bit slower than building up one
string and doing a write() once.

"Optimizing ", as I like to call it, happens when the design is in it's
final stages and works perfectly. As of now, I like to seperate every
individual option which is easier for me to edit, same for the CSS :-).

Thanks again, I didn't knew the solution was that easy :-)

[preet]

won't it be a little easier using this instead

var opt1 as String();
var opt1 = '<option value=\"color:# ffffff\">white</option>\n';
var opt1 = opt1 + 'option value=\"color:# 003366\">darkbl ue</option>\n';

\\ and in the end just do document.write( opt1);
should be a lot faster i think.

--------------------------
My websites
http://www.eecpworld.com/
http://www.indiapropertyhome.com/
http://www.wahmdirect.com/
http://www.indianmatrimonialnet.com/

*** Sent via Developersdex http://www.developersdex.com ***