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="changeList();">
<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="showSelection();">';
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('listOrder').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.getElementById('list').innerHTML = list;
}

function showSelection(){
var fes = document.forms[0].elements;
var selection = fes['list'].value;
document.getElementById('selection').innerHTML = 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="changeList(this);">

function changeList(myList) {
for (var i = 0; myList.options.length; i++) {
myList.options.text = myText;
myList.options.value = myValue;
}
// or to add a new option:
var oOption = document.createElement("OPTION");
oOption.text="New text";
oOption.value="New value";
myList.add(oOption);
}

 

[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.createElement()
Read it, print it out, stick on your screen, use it in your everyday life

someObject.innerHTML
Simply say "NO"... unless you REALLY have to...