471,091 Members | 1,541 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,091 software developers and data experts.

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>
Jul 23 '05 #1
3 2465
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[i].text = myText[i];
myList.options[i].value = myValue[i];
}
// or to add a new option:
var oOption = document.createElement("OPTION");
oOption.text="New text";
oOption.value="New value";
myList.add(oOption);
}
Jul 23 '05 #2
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!
Jul 23 '05 #3
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... :-)
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by joaopedrogoncalves | last post: by
7 posts views Thread by Jochem Donkers | last post: by
7 posts views Thread by garthusenet | last post: by
8 posts views Thread by dd | last post: by
7 posts views Thread by Tom | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.