By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,758 Members | 1,281 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,758 IT Pros & Developers. It's quick & easy.

Safari's javascript problem with innerHTML and dropdowns

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
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

P: n/a
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

P: n/a
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.