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...

Code:

<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...

Code:

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

Code:

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

Code:

<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:

HTML Code:

<!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!

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]));
        }
}

Code:

<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

Originally Posted by Twey

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.

Thread: Region selector not shown in IE

Thread Tools

Search Thread

Region selector not shown in IE

Bookmarks

Bookmarks

Posting Permissions