Results 1 to 7 of 7

Thread: Region selector not shown in IE

  1. #1
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Region selector not shown in IE

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    switch(document.region_form.region_select.options[document.region_form.region_select.selectedIndex].text){
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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>
    Last edited by Twey; 08-12-2006 at 03:41 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Last edited by Twey; 08-12-2006 at 11:38 AM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •