Member Avatar for aPPmaSTer

Hey everyone, I'm working on a web application that's supposed to be compatible with all browsers, yet IE, as usual, is giving me one hell of a headache. I'm posting the code below, it's very straightforward... 3 divs containing ordered lists are made hidden/unhidden via a select menu.

The problem occurs when you select one item from the menu, then selecting another item higher up in the menu.

For example: selecting Super, followed by selecting Standard, makes the numbers in the ordered list all 0's. This doesn't happen in any browser other than IE and I just don't get what I'm doing wrong or why it's doing that. If anybody has an answer I would really appreciate the help... cheers!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function doit()
{
document.getElementById("list1").style.display="none";
document.getElementById("list2").style.display="none";
document.getElementById("list3").style.display="none";

if(document.getElementById("model").value=="lux") document.getElementById("list2").style.display="block";
else if(document.getElementById("model").value=="super") document.getElementById("list3").style.display="block";
else document.getElementById("list1").style.display="block";
}
</script>
</head>
<body onload="doit()">
		
Model:&nbsp;<select id="model" onchange="doit()">
	<option selected="selected" value="standard">Standard</option>
	<option value="lux">Lux</option>
	<option value="super">Super</option>
</select>
<div id="list1"><ol><li>bla</li><li>bla</li><li>bla</li></ol></div>

<div id="list2"><ol><li>bla</li><li>bla</li><li>bla</li><li>bla</li></ol></div>

<div id="list3"><ol><li>bla</li><li>bla</li><li>bla</li><li>bla</li><li>bla</li></ol></div>


</body>
</html>
  • 3 Contributors
  • 8 Replies
  • 137 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by matricol
Member Avatar for Airshow

aPPmaSTer, mySelectMenu.value is not universally understood.


Use the longwinded mySelectMenu[mySelectMenu.selectedIndex].value instead.

Try this:

function doit()
{
	var model = document.getElementById("model");
	var list1 = document.getElementById("list1");
	var list2 = document.getElementById("list2");
	var list3 = document.getElementById("list3");
	
	if(model && list1 && list2 && list3) {
		var val = model[model.selectedIndex].value;
		list1.style.display = (val == "standard") ? 'block' : 'none';
		list2.style.display = (val == "lux") ? 'block' : 'none';
		list3.style.display = (val == "super") ? 'block' : 'none';
	}
}

Airshow

Edited by Airshow because: n/a
Member Avatar for aPPmaSTer

Thanks, but that wasn't the problem... I still get the 0's when I change values from the menu... :(

Member Avatar for Airshow

Then either something else is changing the values to 0's, or some other select menu is being shown. There's nothing in your code nor mine that should cause 0's.

To help diagnose, leave all three select menus showing (comment out the ...display='none' statements) to make the behaviour more observable. If you like, change backgroundColor to indicate the chosen element instead.

Airshow

Member Avatar for aPPmaSTer

When all three are exposed the numbers are shown properly, only when they're hidden and then exposed again do they start to show 0's. I just can't figure it out...

Member Avatar for Airshow

"Stranger and stranger", said Alice.

I will see if I can replicate the symptoms then run some tests.

But first, must get father to the garden centre. He's 87 and gave up driving a while back.

Airshow

Member Avatar for Airshow

aPPmaSTer,

Yes I can reproduce the symptoms in IE9.

It's got to be an IE bug but I have worked out a workaround based on the principle that the last list always displays correctly. By moving the selected list to the last position, everything comes right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
onload = function() {
	var model = document.getElementById("model");
	var listWrapper = document.getElementById("listWrapper");
	var lists = [
		document.getElementById("list1"),
		document.getElementById("list2"),
		document.getElementById("list3")
	];
	function doit() {
		listWrapper.appendChild(lists[model.selectedIndex]);//move the selected list to be last in its containing div.
		for(var i=0; i<lists.length; i++) {
			if(lists[i]) {
				lists[i].style.display = (i == model.selectedIndex) ? 'block' : 'none';
			}
		}
	}
	if(model) {
		model.onchange = doit;
		doit();
	}
};
</script>
</head>
<body>

Model:&nbsp;<select id="model">
	<option selected="selected" value="standard">Standard</option>
	<option value="lux">Lux</option>
	<option value="super">Super</option>
</select>
<div id="listWrapper">
	<ol id="list1"><li>bla</li><li>bla</li><li>bla</li></ol>
	<ol id="list2"><li>bla</li><li>bla</li><li>bla</li><li>bla</li></ol>
	<ol id="list3"><li>bla</li><li>bla</li><li>bla</li><li>bla</li><li>bla</li></ol>
</div>

</body>
</html>

Airshow

commented: thanks! +2
Member Avatar for aPPmaSTer

That's not a bad idea actually (y) Thank you!

Member Avatar for matricol

I thank you too .. it was also a problem of mine

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.