Adding items to a dropdown - Compatibility issue

S

Scott

The code below appears to work on the following:

MAC - Safari
PC - IE
PC - Opera

But the addition of items to the dropdown (select2) does not function
in:

MAC – IE
PC – Mozilla

I am hoping someone can point me in the right direction as to why this
is not occurring.

Any help is much appreciated,
Scott

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

var listHTML = "<TABLE width=100% border=0 cellspacing=1
cellpadding=3>" +
" <tr>" +
" <td width=100>Listbox:</td>" +
" <td><SELECT id=select2 name=select2></SELECT></td>" +
" </tr>" +
"</TABLE>"

var textHTML = "<TABLE width=100% border=0 cellspacing=1
cellpadding=3>" +
" <tr>" +
" <td width=100>Textbox:</td>" +
" <td><INPUT type=text id=text3 name=text3 size=10
maxlength=10></td>" +
" </tr>" +
"</TABLE>"

function ShowHide()
{
var myForm = document.workback;
var mySel = myForm.select1;
var myDiv = document.getElementById("optSel");
if(mySel.value==1)
{
myDiv.innerHTML = textHTML;
}
else
{
myDiv.innerHTML = listHTML;
var myOption;
var myList = myForm.select2;
for(i=1;i<=20;i++)
{
myOption = document.createElement("Option");
myOption.text = i;
myOption.value = i;
myList.add(myOption);
}
}
}

</SCRIPT>
</HEAD>
<BODY onload="ShowHide();">
<FORM name="workback">
<TABLE width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width=100>Show:</td>
<td>
<SELECT id=select1 name=select1 onchange="ShowHide();">
<OPTION value=0>Listbox</OPTION>
<OPTION value=1>Textbox</OPTION>
</SELECT>
</td>
</tr>
</TABLE>
<div id="optSel"></div>
</FORM>
</BODY>
</HTML>
 
R

RobG

Scott said:
The code below appears to work on the following:

MAC - Safari
PC - IE
PC - Opera

But the addition of items to the dropdown (select2) does not function
in:

MAC – IE
PC – Mozilla

I am hoping someone can point me in the right direction as to why this
is not occurring.

Any help is much appreciated,
Scott
Click to expand...

Please don't post code with tabs, use 2 (preferred) or 4 spaces for
indents. Manually wrap code at about 70 characters so autowrapping
doesn't introduce more errors than you had to start with.


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
Click to expand...

The language attribute is depreciated, type is required:

var listHTML = "<TABLE width=100% border=0 cellspacing=1
cellpadding=3>" +
Click to expand...

You probably should quote your attribute values - it isn't mandatory
but you've done it elsewhere in your HTML.

[...]
 
R

Richard Cornford

RobG wrote:
myList.appendChild(myOption);
Click to expand...
<snip>

Out of the frying pan and into the fire. Where adding option elements to
a select element is concerned DOM is a nightmare.

But one simple (and possibly unpopular) truth is that the old way still
works on the newest browsers, reliably:-

myOption = new Option(i, i, true, true);
myList.options[myList.options.length] = myOption;

- and I only know of only two browsers where that doesn't work; NetFront
4/Web Browser 2, which has no Option constructor (and no alternative
method is supported either, it is just not that dynamic) and Opera 5.02,
where the - options - collection lacked a - length - property (but a bit
if feature testing would find the viable - length - property on the
SELECT element, though it is unlikely that version of Opera is still in
use anywhere).

When you have a one-code-fits-all approach available incompatibility for
the sake of DOM evangelism doesn't seem that rational.

Richard.
 
R

RobG

Richard said:
RobG wrote:
myList.appendChild(myOption);
Click to expand...

<snip>

Out of the frying pan and into the fire. Where adding option elements to
a select element is concerned DOM is a nightmare.

But one simple (and possibly unpopular) truth is that the old way still
works on the newest browsers, reliably:-

myOption = new Option(i, i, true, true);
myList.options[myList.options.length] = myOption;

- and I only know of only two browsers where that doesn't work; NetFront
4/Web Browser 2, which has no Option constructor (and no alternative
method is supported either, it is just not that dynamic) and Opera 5.02,
where the - options - collection lacked a - length - property (but a bit
if feature testing would find the viable - length - property on the
SELECT element, though it is unlikely that version of Opera is still in
use anywhere).

When you have a one-code-fits-all approach available incompatibility for
the sake of DOM evangelism doesn't seem that rational.
Click to expand...

I guess the obvious question is: which mainstream browsers don't
support the DOM appendChild method for option elements?

My intention wasn't to evangelise DOM, only to suggest a standards
compliant method that works. I didn't test my solution on IE for
Mac, but it did work in Mozilla for PC, the OP's other required
platform.

AFAICR, IE on Mac has some foibles in this area, but adding options
using DOM isn't one of them.

I intended testing the 'incrementing-the-options-length' method, but
ran out of time - unfortunately I have to compete for Mac-time.
 
S

Scott

Just another quick note:

When testing the updated code some interesting things were happening
on the MAC, with both Safari and IE. Sometimes the listbox would be
populated and other times it wouldn't, the listbox even appeared
disabled at times. To correct this problem, I modified the following
line:

var myList = myForm.select2;

is now:

var myList = document.getElementById("select2");

I have fully tested it on all the mentioned platforms and this has
resolved my compatibility issue, thanks to all!

Scott
 
R

Richard Cornford

RobG said:
I guess the obvious question is: which mainstream browsers
don't support the DOM appendChild method for option elements?
Click to expand...

Why would it matter how 'mainstream' a browser is when there is a method
that will work reliably on all the browsers where the action is
possible, and is amenable to reliable feature detection to determine its
viability?

But IE 5.0 had an interesting problem with - appendChild - when applied
to SELECT elements; it crashed. And as the SELECT elements had an -
appendChild - method and the creation of OPTION elements with -
createElement - was supported there was not a lot that could be feature
tested to avoid provoking the crash.

But on IE 5.5+ you will not find your proposed formulation of:-

myOption = document.createElement("Option");
myOption.text = i;
myOption.value = i;
myList.appendChild(myOption);

- entirely satisfactory.
My intention wasn't to evangelise DOM,
Click to expand...

I did not intend to imply that you were. But there are people who will
promote particular scripted formulations because they are "DOM standard"
regardless (though possibly in ignorance of) more cross-browser and
reliable alternatives.
only to suggest a standards compliant method that works.
Click to expand...

And where it works so does my proposal. But my alternative also works
where it doesn't (at least whenever adding options is possible in the
first place).
I didn't test my solution on IE for Mac, but
it did work in Mozilla for PC,
Click to expand...

Mozilla supports all of the methods available (except the IE version of
the - add - method).
the OP's other required platform.
Click to expand...
<snip>

The OP stated no platform requirements, only the results of testing. And
generally, when someone has gone to the trouble of testing with a
wide-ish range of browsers on multiple OSs there is a good chance that
there preference would be truly cross-browser (with the maximum
available active support).

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to add dropdown selected data to table using jquery 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
SendGrid email issue in responsive Gmail 1
Image shifts to the right when export the page to pdf 4
I need advice re mysqli dropdown 0
Nested Loop Insert Page Break 1

Members online

No members online now.
Total: 37 (members: 1, guests: 36)
Robots: 435

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top