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='addstyle(\"body\",this.options[this.selectedIndex].value,
this.id+\"_\"+this.selectedIndex);'>

<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\">Darkblue</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='addstyle(\"body\",this.options[this.selectedIndex].value,
this.id+\"_\"+this.selectedIndex);'>

<script type='text/javascript'> document.write('<OPTION
value=\"color:#ffffff\">White</OPTION>'); document.write('<OPTION
value=\"color:#003366\">Darkblue</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]

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='addstyle(\"body\",this.options[this.selectedIndex].value,
this.id+\"_\"+this.selectedIndex);'>
<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.

 

[sewerized]

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

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.

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\">darkblue</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/