PDA

View Full Version : Region selector not shown in IE



gausie
08-12-2006, 08:26 AM
Hi everyone

Here is the script I've made - working in Firefox but not in IE. Any suggestions? I could really use some help on this one... :D


<form onsubmit="return false;" name="region_form">
<select name="region_select" style="width: 90%;" onchange="regionListChange();">
<option>England</option>
<option>N. Ireland</option>
<option>Scotland</option>
<option>Wales</option>
<option>R. O. I.</option>
</select>
</form>

<div id="region_list"></div>

and here is the regionListChange command...


function regionListChange(){

var england="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Birmingham</td><td>Bournemouth</td></tr><tr><td>Bradford</td><td>Brighton</td></tr><tr><td>Bristol</td><td>Cambridge</td></tr><tr><td>Coventry</td><td>Derby</td></tr><tr><td>Exeter</td><td>Guildford</td></tr><tr><td>Hull</td><td>Ipswich</td></tr><tr><td>Kent</td><td>Leeds</td></tr><tr><td>Leicester</td><td>Liverpool</td></tr><tr><td>Luton</td><td>London</td></tr><tr><td>Manchester</td><td>Middlesbrough</td></tr><tr><td>Newcastle</td><td>Norwich</td></tr><tr><td>Nottingham</td><td>Oxford</td></tr><tr><td>Plymouth</td><td>Portsmouth</td></tr><tr><td>Reading</td><td>Sheffield</td></tr><tr><td>Southampton</td><td>Southend</td></tr><tr><td>Stoke</td><td>York</td></tr></table>";
var nireland="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Belfast</td><td>&nbsp;</td></tr></table>";
var scotland="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Aberdeen</td><td>Dundee</td></tr><tr><td>Edinburgh</td><td>Glasgow</td></tr><tr><td>Inverness</td><td></td></tr></table>";
var wales="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Cardiff</td><td>Swansea</td></tr></table>";
var roi="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Cork</td><td>Dublin</td></tr></table>";

switch(document.region_form.region_select.value){
case "England":
document.getElementById("region_list").innerHTML = england;
break;
case "N. Ireland":
document.getElementById("region_list").innerHTML = nireland;
break;
case "Scotland":
document.getElementById("region_list").innerHTML = scotland;
break;
case "Wales":
document.getElementById("region_list").innerHTML = wales;
break;
case "R. O. I.":
document.getElementById("region_list").innerHTML = roi;
break;
}

}

Thanks

Gausie

jscheuer1
08-12-2006, 09:20 AM
switch(document.region_form.region_select.options[document.region_form.region_select.selectedIndex].text){

gausie
08-12-2006, 09:35 AM
Thanks for the quick reply!

Right - I forgot to include that I also have


<body onLoad="regionListChange();">

just so that the box starts with whatever is selected as default and is therefore the value when the page starts. When I call regionListChange() in the onload (as above) it appears to be working - the div has content. But when I use the select box, the div content doesn't change, it just stays on the original content.

Any ideas?

Thanks again

Sam

jscheuer1
08-12-2006, 10:40 AM
That was the idea, perhaps you didn't understand, here is a working demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function regionListChange(){

var england="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Birmingham</td><td>Bournemouth</td></tr><tr><td>Bradford</td><td>Brighton</td></tr><tr><td>Bristol</td><td>Cambridge</td></tr><tr><td>Coventry</td><td>Derby</td></tr><tr><td>Exeter</td><td>Guildford</td></tr><tr><td>Hull</td><td>Ipswich</td></tr><tr><td>Kent</td><td>Leeds</td></tr><tr><td>Leicester</td><td>Liverpool</td></tr><tr><td>Luton</td><td>London</td></tr><tr><td>Manchester</td><td>Middlesbrough</td></tr><tr><td>Newcastle</td><td>Norwich</td></tr><tr><td>Nottingham</td><td>Oxford</td></tr><tr><td>Plymouth</td><td>Portsmouth</td></tr><tr><td>Reading</td><td>Sheffield</td></tr><tr><td>Southampton</td><td>Southend</td></tr><tr><td>Stoke</td><td>York</td></tr></table>";
var nireland="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Belfast</td><td>&nbsp;</td></tr></table>";
var scotland="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Aberdeen</td><td>Dundee</td></tr><tr><td>Edinburgh</td><td>Glasgow</td></tr><tr><td>Inverness</td><td></td></tr></table>";
var wales="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Cardiff</td><td>Swansea</td></tr></table>";
var roi="<table class=\"region_list_table\"><tr><td colspan=\"2\" align=\"center\">All areas</td></tr><tr><td>Cork</td><td>Dublin</td></tr></table>";

switch(document.region_form.region_select.options[document.region_form.region_select.selectedIndex].text){
case "England":
document.getElementById("region_list").innerHTML = england;
break;
case "N. Ireland":
document.getElementById("region_list").innerHTML = nireland;
break;
case "Scotland":
document.getElementById("region_list").innerHTML = scotland;
break;
case "Wales":
document.getElementById("region_list").innerHTML = wales;
break;
case "R. O. I.":
document.getElementById("region_list").innerHTML = roi;
break;
}

}
</script>
</head>
<body onLoad="regionListChange();">
<form onsubmit="return false;" name="region_form">
<select name="region_select" style="width: 90%;" onchange="regionListChange();">
<option>England</option>
<option>N. Ireland</option>
<option>Scotland</option>
<option>Wales</option>
<option>R. O. I.</option>
</select>
</form>

<div id="region_list"></div>
</body>
</html>

Twey
08-12-2006, 10:55 AM
Ugh, what horrible code!
function regionListChange(val) {
var regions = {
'england' : ["Birmingham", "Bournemouth", "Bradford", "Brighton", "Bristol", "Cambridge", "Coventry", "Derby", "Exeter", "Guildford", "Hull", "Ipswich", "Kent", "Leeds", "Leicester", "Liverpool", "Luton", "London"
, "Manchester", "Middlesbrough", "Newcastle", "Norwich", "Nottingham", "Oxford", "Plymouth", "Portsmouth", "Reading", "Sheffield", "Southampton", "Southend", "Stoke", "York"],
'nireland' : ["Belfast"],
'scotland' : ["Aberdeen", "Dundee", "Edinburgh", "Glasgow", "Inverness"],
'wales' : ["Cardiff", "Swansea"],
'roi' : ["Cork", "Dublin"]
};

if(!regions[val]) return;

var op = document.getElementById("region_list");
while(op.hasChildNodes()) op.removeChild(op.firstChild);
op.appendChild(op = document.createElement("table")).class = "region_list_table";
var row, cell;
op.appendChild(
row = document.createElement("tr")
).appendChild(
cell = document.createElement("td")
).style.textAlign = "center";
cell.colSpan = 2;
cell.appendChild(
document.createTextNode("All Areas")
);
for(var i = 0; i < regions[val].length; ++i) {
if(i % 2 === 0)
row = op.appendChild(document.createElement("tr"));
cell = row.appendChild(document.createElement("td"));
cell.appendChild(document.createTextNode(regions[val][i]));
}
}
<form onsubmit="return false;" name="region_form">
<select name="region_select" style="width: 90%;" onchange="regionListChange(this.value);">
<option value="england">England</option>
<option value="nireland">N. Ireland</option>
<option value="scotland">Scotland</option>
<option value="wales">Wales</option>
<option value="roi">R. O. I.</option>
</select>
</form>

<div id="region_list"></div>

jscheuer1
08-12-2006, 11:20 AM
Ugh, what horrible code!

It was the OP's code, I don't have time to rewrite everything if all it takes is a one line change to get it working.

Also, I know that my version of the OP's code works.

Twey
08-12-2006, 11:28 AM
Sorry, I was actually commenting on the OP's code. You posted while I was still writing my version. :)
/EDIT: There we go, all debugged.