Safari's javascript problem with innerHTML and dropdowns

[mtz]

Hi there,

It looks like safari has a problem with innerHTML. I have to change a
dropdown depending on a selection in another dropdown. When I change
the selection in the first dropdown the second apears, then when I
change the selection in the second I can display it. If I try to
repeat this again it's not working anymore. This works fine on several
browsers under Windows. Here is the code:

<select name="listOrder " onchange="chang eList();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<div id="list">
</div>

<div id="selection" >
</div>
<script>
function changeList(){
var fes = document.forms[0].elements;
var list = '<select name="list" onchange="showS election();">';
if(fes['listOrder'].value == "1"){
list += '<option value="a">a</option>';
list += '<option value="b">b</option>';
list += '<option value="c">c</option>';
}else if(fes('listOrd er').value == "2"){
list += '<option value="d">d</option>';
list += '<option value="e">e</option>';
list += '<option value="f">f</option>';
list += '</select>';
}else{
list += '<option value="x">x</option>';
list += '<option value="y">y</option>';
list += '<option value="z">z</option>';
}
list += '</select>';
document.getEle mentById('list' ).innerHTML = list;
}

function showSelection() {
var fes = document.forms[0].elements;
var selection = fes['list'].value;
document.getEle mentById('selec tion').innerHTM L = selection;
}
</script>

[VK]

Wow!... Did you ever try to change a bulb in your lamp by using the hummer
and the garden scissors? By the approach it's about the same.

<select name="listOrder " onchange="chang eList(this);">

function changeList(myLi st) {
for (var i = 0; myList.options. length; i++) {
myList.options[i].text = myText[i];
myList.options[i].value = myValue[i];
}
// or to add a new option:
var oOption = document.create Element("OPTION ");
oOption.text="N ew text";
oOption.value=" New value";
myList.add(oOpt ion);
}

[m t]

Hi VK,

I agree your way is more efficient, but it doesn't fix the problem. In
my application I have to hide and display the second dropdown, so I have
to use innerHTML - that's where the problem is.

Thanks
mtz

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[VK]

> In my application I have to hide and display the second dropdown, so I
have

to use innerHTML - that's where the problem is.

No, you don't!
The only two occasions to semi-understandable use of innerHTML are:
1) a plain rtf(text)-containing <div>
2) a cell content manipulations in the DOM-TOM(IE) cross-browsers solutions

In all other cases you have to use the appropriate DOM methods.
Besides letting you to work "in white gloves", it will insure that all
"model's change" listeners will be accordingly notified (including your
forms).

document.create Element()
Read it, print it out, stick on your screen, use it in your everyday life

someObject.inne rHTML
Simply say "NO"... unless you REALLY have to... :-)