SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 43
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ajax drop downs not working in IE, works in FF

    hi, here is my code:

    page:
    Code:
    		<select class="quote_dropdown" name="places" id="places" onchange="showPlaces(this.value)">
    			<option value="">Please Choose..</option>
    			<option value="postcodes">London Postcodes</option>
    			<option value="areanames">London Area Names</option>
    			<option value="cities">UK Cities</option>
    			<option value="airports">UK Airports</option>
    			<option value="seaports">UK Seaports</option>
    			<option value="stations">Train Stations</option>
    
    					</select>
    
    
    		<p class="quote_text">2. Choose a <b>destination</b>:</p>
    		
    <select class="quote_dropdown" name="showareas" id="showareas">
    <option value="">...</option>
    </select>
    javascript:
    Code:
    var xmlHttp
    
    function showPlaces(str)
    { 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
      {
      alert ("Your browser does not support AJAX!");
      return;
      } 
    var url="getplace.asp";
    url=url+"?q="+str;
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    }
    
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4)
    { 
    document.getElementById("showareas").innerHTML=xmlHttp.responseText;
    }
    }
    
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
      {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
    catch (e)
      {
      // Internet Explorer
      try
        {
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
      catch (e)
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
    return xmlHttp;
    }
    asp:
    Code:
    <&#37;
    response.expires=-1
    IF request.querystring("q") = "postcodes" THEN 
         sql = "SELECT * FROM tblPostcodes"
    ElseIF request.querystring("q") = "areanames" THEN 
         sql = "SELECT * FROM tblAreaNames"
    ElseIF request.querystring("q") = "airports" THEN 
         sql = "SELECT * FROM tblAirports"
    ElseIF request.querystring("q") = "stations" THEN 
         sql = "SELECT * FROM tblStations"
    ElseIF request.querystring("q") = "seaports" THEN 
         sql = "SELECT * FROM tblSeaports"
    ElseIF request.querystring("q") = "cities" THEN 
         sql = "SELECT * FROM tblCities"
    End IF
    
    
    set conn=Server.CreateObject("ADODB.Connection")
    conn.Provider="Microsoft.Jet.OLEDB.4.0"
    conn.Open(Server.Mappath("database\db.mdb"))
    set rs = Server.CreateObject("ADODB.recordset")
    rs.Open sql, conn
    
    
    do until rs.EOF
      for each x in rs.Fields
        response.write("<option value=""" & x.value & """>" & x.value & "</option>")
      next
      rs.MoveNext
    loop
    
    
    %>

    the page can be seen here..

    http://www.londonheathrowcars.com/gg/index.asp

    the first drop down menu loads the database values in the second drop down.

    there are a few issues i need help with.

    1. in internet explorer it just loads a blank drop down. can anyone see why?

    2. is there a way to pre-load all of the values when the page loads. the reason being one of the options loads about 500 values. If they were pre-loaded there would be no delay.

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can skip the ajax here completely. Using optgroup put all your options in one select. Using unobtrusive scripting (ideally) you can then scan through this list and create a list with all the optgroup values and an empty sublist. The original select can be made invisible and the sublist can be updated when the user select a parent group, the sublist being filled by referring to the invisible master select.

    Also if you intend to use ajax alot I would recommend you use a library. A nice lightweight one like fleegix for example suits me fine and makes life much easier when doing this stuff.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, i saw the following:

    http://www.w3schools.com/tags/tag_optgroup.asp

    does optgroup just group the options with a heading.. the reason being is that there will be a LOT of options in my drop down and i would still rather have an initial drop down filtering them..

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if you understood. You output one select list to your page with all options grouped under an optgroup. Lets call this the MasterSelect.

    Once the page loads your javascript makes this MasterSelect invisible. You then create a second select list called say ParentList and loop through all optgroup items in the MasterSelect. Put these into the new parentlist, create an onchange event for it and add it to the document.

    Now create an empty second list called say childlist and add it to the document. In the onchange event for the parentlist find the child items for the selected value by checking the masterselect and list them in the childlist.

    Only people with script turned off will see the MasterSelect.

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i get you.. let me start making that and i'll post back when i've made some progress

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, ive put the 3 drop downs on a page..

    http://www.londonheathrowcars.com/dog.asp

    could you help me with the javascript..

    i) hiding the master drop down..
    ii) loading the optgroup labels in the parent drop down..
    iii) loading the chosen optgroup values in the child drop down.


    thanks

    Code:
    <!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=iso-8859-1" />
    
    <title>London Heathrow Cars | Heathrow Airport Transfers | Private Hire Cab Service | London UK</title>
    
    <meta name="description" content="Based at London Heathrow Airport (LHR). Pre-book or call on arrival. Set Fares - No taxi meters; (to London from &#163;23) private transfers to and from all UK." />
    
    <meta name="keywords" content="heathrow taxi,taxi from heathrow,taxi to heathrow,heathrow taxi prices,london heathrow airport,airport transfer service,london,airport,uk,taxi" />
    
    <link rel="stylesheet" type="text/css" href="scripts/style.css" media="all" />
    <!--[if IE ]>
    <style type="text/css">
    .lcol,.rcol{
    }
    </style>
    <![endif]-->
    <script type="text/javascript" src="js.js"></script>
    
    </head>
    
    <body>
    
    
    <div id="main">
    	
    <table border="0" width="800" cellspacing="0" cellpadding="0">
    	<tr>
    		<td width="164" align="left" valign="top">
    		
    				<p class="quote_text">1. Parent Drop Down:</p>
    <form method="post">
    		<select class="quote_dropdown" name="places" id="places">
    			<option value="">Please Choose..</option>
    		</select>
    
    
    		<p class="quote_text">2. Child Drop Down:</p>
    		
    <select class="quote_dropdown" name="showareas" id="showareas">
    <option value="">...</option>
    </select>
    </form>
    
    
    		
    
    		
    		</td>
    		<td width="436" align="left" valign="top">
    
    		<table class="maintable" cellspacing="0" cellpadding="0">
        <tr>
            <td class="top"></td>
            <td class="mid"></td>
            <td class="top2"></td>
        </tr>
        <tr>
            <td class="lcol"></td>
            <td class="mid">
    		
    
    
    <br /><br />
    		<p class="quote_text">2. Master Drop Down:</p>
    
    <select name="master" id="master">
    <optgroup label="London Postcodes">
    <option value="BR1">BR1</option>
    <option value="BR2">BR2</option>
    <option value="BR3">BR3</option>
    <option value="BR4">BR4</option>
    <option value="BR5">BR5</option>
    <option value="BR6">BR6</option>
    <option value="BR7">BR7</option>
    <option value="BR8">BR8</option>
    <option value="CR0">CR0</option>
    <option value="CR1">CR1</option>
    <option value="CR2">CR2</option>
    <option value="CR3">CR3</option>
    <option value="CR4">CR4</option>
    <option value="CR5">CR5</option>
    <option value="CR6">CR6</option>
    <option value="CR7">CR7</option>
    <option value="CR8">CR8</option>
    <option value="CR9">CR9</option>
    <option value="DA1">DA1</option>
    <option value="DA10">DA10</option>
    <option value="DA11">DA11</option>
    <option value="DA12">DA12</option>
    <option value="DA13">DA13</option>
    <option value="DA14">DA14</option>
    <option value="DA15">DA15</option>
    <option value="DA16">DA16</option>
    <option value="DA17">DA17</option>
    <option value="DA18">DA18</option>
    <option value="DA2">DA2</option>
    <option value="DA3">DA3</option>
    <option value="DA4">DA4</option>
    <option value="DA5">DA5</option>
    <option value="DA6">DA6</option>
    <option value="DA7">DA7</option>
    <option value="DA8">DA8</option>
    <option value="DA9">DA9</option>
    <option value="E1">E1</option>
    <option value="E10">E10</option>
    <option value="E11">E11</option>
    <option value="E12">E12</option>
    <option value="E13">E13</option>
    <option value="E14">E14</option>
    <option value="E15">E15</option>
    <option value="E16">E16</option>
    <option value="E17">E17</option>
    <option value="E18">E18</option>
    <option value="E2">E2</option>
    <option value="E3">E3</option>
    <option value="E4">E4</option>
    <option value="E5">E5</option>
    <option value="E6">E6</option>
    <option value="E7">E7</option>
    <option value="E8">E8</option>
    <option value="E9">E9</option>
    <option value="EC1">EC1</option>
    <option value="EC2">EC2</option>
    <option value="EC3">EC3</option>
    <option value="EC4">EC4</option>
    <option value="EN1">EN1</option>
    <option value="EN2">EN2</option>
    <option value="EN3">EN3</option>
    <option value="EN4">EN4</option>
    <option value="EN5">EN5</option>
    <option value="HA0">HA0</option>
    <option value="HA1">HA1</option>
    <option value="HA2">HA2</option>
    <option value="HA3">HA3</option>
    <option value="HA4">HA4</option>
    <option value="HA5">HA5</option>
    <option value="HA6">HA6</option>
    <option value="HA7">HA7</option>
    <option value="HA8">HA8</option>
    <option value="HA9">HA9</option>
    <option value="HP1">HP1</option>
    <option value="HP2">HP2</option>
    <option value="HP3">HP3</option>
    <option value="HP4">HP4</option>
    <option value="HP5">HP5</option>
    <option value="HP6">HP6</option>
    <option value="HP7">HP7</option>
    <option value="HP8">HP8</option>
    <option value="HP9">HP9</option>
    <option value="IG1">IG1</option>
    <option value="IG10">IG10</option>
    <option value="IG11">IG11</option>
    <option value="IG2">IG2</option>
    <option value="IG3">IG3</option>
    <option value="IG4">IG4</option>
    <option value="IG5">IG5</option>
    <option value="IG6">IG6</option>
    <option value="IG7">IG7</option>
    <option value="IG8">IG8</option>
    <option value="IG9">IG9</option>
    <option value="KT1">KT1</option>
    <option value="KT10">KT10</option>
    <option value="KT11">KT11</option>
    <option value="KT12">KT12</option>
    <option value="KT13">KT13</option>
    <option value="KT14">KT14</option>
    <option value="KT15">KT15</option>
    <option value="KT16">KT16</option>
    <option value="KT17">KT17</option>
    <option value="KT18">KT18</option>
    <option value="KT19">KT19</option>
    <option value="KT2">KT2</option>
    <option value="KT3">KT3</option>
    <option value="KT4">KT4</option>
    <option value="KT5">KT5</option>
    <option value="KT6">KT6</option>
    <option value="KT7">KT7</option>
    <option value="KT8">KT8</option>
    <option value="KT9">KT9</option>
    <option value="N1">N1</option>
    <option value="N10">N10</option>
    <option value="N11">N11</option>
    <option value="N12">N12</option>
    <option value="N13">N13</option>
    <option value="N14">N14</option>
    <option value="N15">N15</option>
    <option value="N16">N16</option>
    <option value="N17">N17</option>
    <option value="N18">N18</option>
    <option value="N19">N19</option>
    <option value="N2">N2</option>
    <option value="N20">N20</option>
    <option value="N21">N21</option>
    <option value="N22">N22</option>
    <option value="N3">N3</option>
    <option value="N4">N4</option>
    <option value="N5">N5</option>
    <option value="N6">N6</option>
    <option value="N7">N7</option>
    <option value="N8">N8</option>
    <option value="N9">N9</option>
    <option value="NW1">NW1</option>
    <option value="NW10">NW10</option>
    <option value="NW11">NW11</option>
    <option value="NW2">NW2</option>
    <option value="NW3">NW3</option>
    <option value="NW4">NW4</option>
    <option value="NW5">NW5</option>
    <option value="NW6">NW6</option>
    <option value="NW7">NW7</option>
    <option value="NW8">NW8</option>
    <option value="NW9">NW9</option>
    <option value="RM1">RM1</option>
    <option value="RM10">RM10</option>
    <option value="RM11">RM11</option>
    <option value="RM12">RM12</option>
    <option value="RM13">RM13</option>
    <option value="RM14">RM14</option>
    <option value="RM15">RM15</option>
    <option value="RM16">RM16</option>
    <option value="RM17">RM17</option>
    <option value="RM18">RM18</option>
    <option value="RM19">RM19</option>
    <option value="RM2">RM2</option>
    <option value="RM20">RM20</option>
    <option value="RM3">RM3</option>
    <option value="RM4">RM4</option>
    <option value="RM5">RM5</option>
    <option value="RM6">RM6</option>
    <option value="RM7">RM7</option>
    <option value="RM8">RM8</option>
    <option value="RM9">RM9</option>
    <option value="SE1">SE1</option>
    <option value="SE10">SE10</option>
    <option value="SE11">SE11</option>
    <option value="SE12">SE12</option>
    <option value="SE13">SE13</option>
    <option value="SE14">SE14</option>
    <option value="SE15">SE15</option>
    <option value="SE16">SE16</option>
    <option value="SE17">SE17</option>
    <option value="SE18">SE18</option>
    <option value="SE19">SE19</option>
    <option value="SE2">SE2</option>
    <option value="SE20">SE20</option>
    <option value="SE21">SE21</option>
    <option value="SE22">SE22</option>
    <option value="SE23">SE23</option>
    <option value="SE24">SE24</option>
    <option value="SE25">SE25</option>
    <option value="SE26">SE26</option>
    <option value="SE27">SE27</option>
    <option value="SE28">SE28</option>
    <option value="SE3">SE3</option>
    <option value="SE4">SE4</option>
    <option value="SE5">SE5</option>
    <option value="SE6">SE6</option>
    <option value="SE7">SE7</option>
    <option value="SE8">SE8</option>
    <option value="SE9">SE9</option>
    <option value="SL0">SL0</option>
    <option value="SL1">SL1</option>
    <option value="SL2">SL2</option>
    <option value="SL3">SL3</option>
    <option value="SL4">SL4</option>
    <option value="SL5">SL5</option>
    <option value="SM1">SM1</option>
    <option value="SM2">SM2</option>
    <option value="SM3">SM3</option>
    <option value="SM4">SM4</option>
    <option value="SM5">SM5</option>
    <option value="SM6">SM6</option>
    <option value="SM7">SM7</option>
    <option value="SW1">SW1</option>
    <option value="SW10">SW10</option>
    <option value="SW11">SW11</option>
    <option value="SW12">SW12</option>
    <option value="SW13">SW13</option>
    <option value="SW14">SW14</option>
    <option value="SW15">SW15</option>
    <option value="SW16">SW16</option>
    <option value="SW17">SW17</option>
    <option value="SW18">SW18</option>
    <option value="SW19">SW19</option>
    <option value="SW2">SW2</option>
    <option value="SW20">SW20</option>
    <option value="SW3">SW3</option>
    <option value="SW4">SW4</option>
    <option value="SW5">SW5</option>
    <option value="SW6">SW6</option>
    <option value="SW7">SW7</option>
    <option value="SW8">SW8</option>
    <option value="SW9">SW9</option>
    <option value="TN14">TN14</option>
    <option value="TN16">TN16</option>
    <option value="TW1">TW1</option>
    <option value="TW10">TW10</option>
    <option value="TW11">TW11</option>
    <option value="TW12">TW12</option>
    <option value="TW13">TW13</option>
    <option value="TW14">TW14</option>
    <option value="TW15">TW15</option>
    <option value="TW16">TW16</option>
    <option value="TW17">TW17</option>
    <option value="TW18">TW18</option>
    <option value="TW19">TW19</option>
    <option value="TW2">TW2</option>
    <option value="TW20">TW20</option>
    <option value="TW3">TW3</option>
    <option value="TW4">TW4</option>
    <option value="TW5">TW5</option>
    <option value="TW6">TW6</option>
    <option value="TW7">TW7</option>
    <option value="TW8">TW8</option>
    <option value="TW9">TW9</option>
    <option value="UB1">UB1</option>
    <option value="UB10">UB10</option>
    <option value="UB2">UB2</option>
    <option value="UB3">UB3</option>
    <option value="UB4">UB4</option>
    <option value="UB5">UB5</option>
    <option value="UB6">UB6</option>
    <option value="UB7">UB7</option>
    <option value="UB8">UB8</option>
    <option value="UB9">UB9</option>
    <option value="W1">W1</option>
    <option value="W10">W10</option>
    <option value="W11">W11</option>
    <option value="W12">W12</option>
    <option value="W13">W13</option>
    <option value="W14">W14</option>
    <option value="W2">W2</option>
    <option value="W3">W3</option>
    <option value="W4">W4</option>
    <option value="W5">W5</option>
    <option value="W6">W6</option>
    <option value="W7">W7</option>
    <option value="W8">W8</option>
    <option value="W9">W9</option>
    <option value="WC1">WC1</option>
    <option value="WC2">WC2</option>
    <option value="WD17">WD17</option>
    <option value="WD18">WD18</option>
    <option value="WD19">WD19</option>
    <option value="WD23">WD23</option>
    <option value="WD24">WD24</option>
    <option value="WD25">WD25</option>
    <option value="WD3">WD3</option>
    <option value="WD4">WD4</option>
    <option value="WD5">WD5</option>
    <option value="WD6">WD6</option>
    <option value="WD7">WD7</option>
    <optgroup label="London Area Names">
    <option value="Abbey Wood">Abbey Wood</option>
    <option value="Acton">Acton</option>
    <option value="Addington">Addington</option>
    <option value="Addlestone">Addlestone</option>
    <option value="Aldbury">Aldbury</option>
    <option value="Aldenham">Aldenham</option>
    <option value="Aldgate">Aldgate</option>
    <option value="Aldwych">Aldwych</option>
    <option value="Amersham">Amersham</option>
    <option value="Angel">Angel</option>
    <option value="Archway">Archway</option>
    <option value="Ascot">Ascot</option>
    <option value="Ashford">Ashford</option>
    <option value="Ashted">Ashted</option>
    <option value="Baker Street">Baker Street</option>
    <option value="Balham">Balham</option>
    <option value="Bank">Bank</option>
    <option value="Bankside">Bankside</option>
    <option value="Banstead">Banstead</option>
    <option value="Barbican">Barbican</option>
    <option value="Barking">Barking</option>
    <option value="Barkingside">Barkingside</option>
    <option value="Barnes">Barnes</option>
    <option value="Barnet">Barnet</option>
    <option value="Battersea">Battersea</option>
    <option value="Bayswater">Bayswater</option>
    <option value="Beaconsfield">Beaconsfield</option>
    <option value="Beckenham">Beckenham</option>
    <option value="Beckton">Beckton</option>
    <option value="Becontree">Becontree</option>
    <option value="Bedmond">Bedmond</option>
    <option value="Belgravia">Belgravia</option>
    <option value="Belmont">Belmont</option>
    <option value="Belsize Park">Belsize Park</option>
    <option value="Belvedere">Belvedere</option>
    <option value="Bermondsey">Bermondsey</option>
    <option value="Berrylands">Berrylands</option>
    <option value="Bethnal Green">Bethnal Green</option>
    <option value="Bexley">Bexley</option>
    <option value="Bexleyheath">Bexleyheath</option>
    <option value="Blackfriars">Blackfriars</option>
    <option value="Blackheath">Blackheath</option>
    <option value="Blackwall">Blackwall</option>
    <option value="Bloomsbury">Bloomsbury</option>
    <option value="Borehamwood">Borehamwood</option>
    <option value="Bow">Bow</option>
    <option value="Brent">Brent</option>
    <option value="Brent Cross">Brent Cross</option>
    <option value="Brentford">Brentford</option>
    <option value="Brixton">Brixton</option>
    <option value="Broad Street">Broad Street</option>
    <option value="Broadgate">Broadgate</option>
    <option value="Brockley">Brockley</option>
    <option value="Bromley">Bromley</option>
    <option value="Brondesbury">Brondesbury</option>
    <option value="Brook Greeen">Brook Greeen</option>
    <option value="Brook Green">Brook Green</option>
    <option value="Buckhurst Hill">Buckhurst Hill</option>
    <option value="Bushey">Bushey</option>
    <option value="Camberwell">Camberwell</option>
    <option value="Camden">Camden</option>
    <option value="Camden Town">Camden Town</option>
    <option value="Canary Wharf">Canary Wharf</option>
    <option value="Canning Town">Canning Town</option>
    <option value="Canonbury">Canonbury</option>
    <option value="Carshalton">Carshalton</option>
    <option value="Caterham">Caterham</option>
    <option value="Catford">Catford</option>
    <option value="Chadwell Heath">Chadwell Heath</option>
    <option value="Chalfont St Giles">Chalfont St Giles</option>
    <option value="Charing Cross">Charing Cross</option>
    <option value="Charlton">Charlton</option>
    <option value="Cheam">Cheam</option>
    <option value="Chelsea">Chelsea</option>
    <option value="Chelsfield">Chelsfield</option>
    <option value="Chesham">Chesham</option>
    <option value="Chessington">Chessington</option>
    <option value="Chingford">Chingford</option>
    <option value="Chipperfield">Chipperfield</option>
    <option value="Chislehurst">Chislehurst</option>
    <option value="Chiswick">Chiswick</option>
    <option value="Clapham">Clapham</option>
    <option value="Clapham Common">Clapham Common</option>
    <option value="Clapham Junction">Clapham Junction</option>
    <option value="Clapham North">Clapham North</option>
    <option value="Clapton">Clapton</option>
    <option value="Clayhall">Clayhall</option>
    <option value="Clerkenwell">Clerkenwell</option>
    <option value="Cockfosters">Cockfosters</option>
    <option value="Coleshill">Coleshill</option>
    <option value="Collier Row">Collier Row</option>
    <option value="Coulsdon">Coulsdon</option>
    <option value="Countywide">Countywide</option>
    <option value="Covent Garden">Covent Garden</option>
    <option value="Cowley">Cowley</option>
    <option value="Crayford">Crayford</option>
    <option value="Crews Hill">Crews Hill</option>
    <option value="Cricklewood">Cricklewood</option>
    <option value="Crouch End">Crouch End</option>
    <option value="Croxley Green">Croxley Green</option>
    <option value="Croydon">Croydon</option>
    <option value="Crystal Palace">Crystal Palace</option>
    <option value="Cudham">Cudham</option>
    <option value="Dagenham">Dagenham</option>
    <option value="Dalston">Dalston</option>
    <option value="Dartford">Dartford</option>
    <option value="Deptford">Deptford</option>
    <option value="Docklands">Docklands</option>
    <option value="Dollis Hill">Dollis Hill</option>
    <option value="Dulwich">Dulwich</option>
    <option value="Ealing">Ealing</option>
    <option value="Earls Court">Earls Court</option>
    <option value="East Bedfont">East Bedfont</option>
    <option value="East Dulwich">East Dulwich</option>
    <option value="East Finchley">East Finchley</option>
    <option value="East Ham">East Ham</option>
    <option value="East Sheen">East Sheen</option>
    <option value="Eastcote">Eastcote</option>
    <option value="Edgware">Edgware</option>
    <option value="Edgware Road">Edgware Road</option>
    <option value="Edmonton">Edmonton</option>
    <option value="Edmonton Lower">Edmonton Lower</option>
    <option value="Egham">Egham</option>
    <option value="Elephant & Castle">Elephant & Castle</option>
    <option value="Elm Park">Elm Park</option>
    <option value="Eltham">Eltham</option>
    <option value="Embankment">Embankment</option>
    <option value="Emerson Park">Emerson Park</option>
    <option value="Enfield">Enfield</option>
    <option value="Enfield Town">Enfield Town</option>
    <option value="Erith">Erith</option>
    <option value="Esher">Esher</option>
    <option value="Euston">Euston</option>
    <option value="Euston Square">Euston Square</option>
    <option value="Ewell">Ewell</option>
    <option value="Exchange Square">Exchange Square</option>
    <option value="Farleigh">Farleigh</option>
    <option value="Farnham Common">Farnham Common</option>
    <option value="Farningham">Farningham</option>
    <option value="Farringdon">Farringdon</option>
    <option value="Feltham">Feltham</option>
    <option value="Finchley">Finchley</option>
    <option value="Finchley Road">Finchley Road</option>
    <option value="Finsbury">Finsbury</option>
    <option value="Finsbury Park">Finsbury Park</option>
    <option value="Fitzrovia">Fitzrovia</option>
    <option value="Fleet Street">Fleet Street</option>
    <option value="Footscray">Footscray</option>
    <option value="Forest Gate">Forest Gate</option>
    <option value="Forest Hill">Forest Hill</option>
    <option value="Friern Barnet">Friern Barnet</option>
    <option value="Fulham">Fulham</option>
    <option value="Gants Hill">Gants Hill</option>
    <option value="Gidea Park">Gidea Park</option>
    <option value="Golders Green">Golders Green</option>
    <option value="Gravesend">Gravesend</option>
    <option value="Grays">Grays</option>
    <option value="Grays Inn">Grays Inn</option>
    <option value="Green Park">Green Park</option>
    <option value="Greenford">Greenford</option>
    <option value="Greenwich">Greenwich</option>
    <option value="Greenwich Park">Greenwich Park</option>
    <option value="Grove Park & Lee">Grove Park & Lee</option>
    <option value="Hackney">Hackney</option>
    <option value="Hadley Wood">Hadley Wood</option>
    <option value="Hainault">Hainault</option>
    <option value="Ham">Ham</option>
    <option value="Hammersmith">Hammersmith</option>
    <option value="Hampstead">Hampstead</option>
    <option value="Hampton">Hampton</option>
    <option value="Hampton Wick">Hampton Wick</option>
    <option value="Hanwell">Hanwell</option>
    <option value="Harefield">Harefield</option>
    <option value="Haringey">Haringey</option>
    <option value="Harlington">Harlington</option>
    <option value="Harmondsworth">Harmondsworth</option>
    <option value="Harold Hill">Harold Hill</option>
    <option value="Harold Wood">Harold Wood</option>
    <option value="Harrow">Harrow</option>
    <option value="Harrow on Hill">Harrow on Hill</option>
    <option value="Hartley">Hartley</option>
    <option value="Hatton">Hatton</option>
    <option value="Hatton Garden">Hatton Garden</option>
    <option value="Havering">Havering</option>
    <option value="Havering-Atte-Bower">Havering-Atte-Bower</option>
    <option value="Hawley">Hawley</option>
    <option value="Hayes">Hayes</option>
    <option value="Haymarket">Haymarket</option>
    <option value="Hemel Hempstead">Hemel Hempstead</option>
    <option value="Hendon">Hendon</option>
    <option value="Herne Hill">Herne Hill</option>
    <option value="Hersham">Hersham</option>
    <option value="Heston">Heston</option>
    <option value="Highbury">Highbury</option>
    <option value="Highgate">Highgate</option>
    <option value="Hillingdon">Hillingdon</option>
    <option value="Holborn">Holborn</option>
    <option value="Holland Park">Holland Park</option>
    <option value="Holloway">Holloway</option>
    <option value="Homerton">Homerton</option>
    <option value="Honor Oak">Honor Oak</option>
    <option value="Hook">Hook</option>
    <option value="Hooley">Hooley</option>
    <option value="Hornchurch">Hornchurch</option>
    <option value="Hornsey">Hornsey</option>
    <option value="Hounslow">Hounslow</option>
    <option value="Hounslow West">Hounslow West</option>
    <option value="Hoxton">Hoxton</option>
    <option value="Hyde Park">Hyde Park</option>
    <option value="Hyde Park Corner">Hyde Park Corner</option>
    <option value="Ickenham">Ickenham</option>
    <option value="Ilford">Ilford</option>
    <option value="Isle Of Dogs">Isle Of Dogs</option>
    <option value="Isleworth">Isleworth</option>
    <option value="Islington">Islington</option>
    <option value="Kenley">Kenley</option>
    <option value="Kennington">Kennington</option>
    <option value="Kensal Green">Kensal Green</option>
    <option value="Kensal Rise">Kensal Rise</option>
    <option value="Kensington">Kensington</option>
    <option value="Kentish Town">Kentish Town</option>
    <option value="Kenton">Kenton</option>
    <option value="Keston">Keston</option>
    <option value="Kew">Kew</option>
    <option value="Kidbrooke">Kidbrooke</option>
    <option value="Kilburn">Kilburn</option>
    <option value="Kings Cross">Kings Cross</option>
    <option value="Kingsbury">Kingsbury</option>
    <option value="Kingston">Kingston</option>
    <option value="Kingston Upon Thames">Kingston Upon Thames</option>
    <option value="Kingston Vale">Kingston Vale</option>
    <option value="Knightsbridge">Knightsbridge</option>
    <option value="Ladbroke Grove">Ladbroke Grove</option>
    <option value="Lambeth">Lambeth</option>
    <option value="Lancaster Gate">Lancaster Gate</option>
    <option value="Langley">Langley</option>
    <option value="Leicester Square">Leicester Square</option>
    <option value="Leverstock Green">Leverstock Green</option>
    <option value="Lewisham">Lewisham</option>
    <option value="Leyton">Leyton</option>
    <option value="Leytonstone">Leytonstone</option>
    <option value="Limehouse">Limehouse</option>
    <option value="Little Venice">Little Venice</option>
    <option value="Liverpool Street">Liverpool Street</option>
    <option value="London Bridge">London Bridge</option>
    <option value="London Wall">London Wall</option>
    <option value="Longford">Longford</option>
    <option value="Loughton">Loughton</option>
    <option value="Lyne">Lyne</option>
    <option value="Maida Vale">Maida Vale</option>
    <option value="Manor Park">Manor Park</option>
    <option value="Marble Arch">Marble Arch</option>
    <option value="Marylebone">Marylebone</option>
    <option value="Mayfair">Mayfair</option>
    <option value="Meopham">Meopham</option>
    <option value="Merton">Merton</option>
    <option value="Mill Hill">Mill Hill</option>
    <option value="Mitcham">Mitcham</option>
    <option value="Molesey">Molesey</option>
    <option value="Monument">Monument</option>
    <option value="Moorgate">Moorgate</option>
    <option value="Morden">Morden</option>
    <option value="Mort Lake">Mort Lake</option>
    <option value="Mortlake">Mortlake</option>
    <option value="Mottingham">Mottingham</option>
    <option value="Muswell Hill">Muswell Hill</option>
    <option value="Neasden">Neasden</option>
    <option value="New Cross">New Cross</option>
    <option value="New Malden">New Malden</option>
    <option value="Newbury Park">Newbury Park</option>
    <option value="Newham">Newham</option>
    <option value="Norbiton">Norbiton</option>
    <option value="Norbury">Norbury</option>
    <option value="North Acton">North Acton</option>
    <option value="North Cray">North Cray</option>
    <option value="North Finchley">North Finchley</option>
    <option value="North Kensington">North Kensington</option>
    <option value="North Ockendon">North Ockendon</option>
    <option value="Northholt">Northholt</option>
    <option value="Northolt">Northolt</option>
    <option value="Northwood">Northwood</option>
    <option value="Norwood Green">Norwood Green</option>
    <option value="Norwood Upper">Norwood Upper</option>
    <option value="Noting Hill Gate">Noting Hill Gate</option>
    <option value="Notting Hill">Notting Hill</option>
    <option value="Old Oak Common">Old Oak Common</option>
    <option value="Old Street">Old Street</option>
    <option value="Olympia">Olympia</option>
    <option value="Orpington">Orpington</option>
    <option value="Osterley">Osterley</option>
    <option value="Oxford Circus">Oxford Circus</option>
    <option value="Oxford Street">Oxford Street</option>
    <option value="Paddington">Paddington</option>
    <option value="Palmers Green">Palmers Green</option>
    <option value="Park Lane">Park Lane</option>
    <option value="Park Royal">Park Royal</option>
    <option value="Parsons Green">Parsons Green</option>
    <option value="Passingford Bridge">Passingford Bridge</option>
    <option value="Peckham">Peckham</option>
    <option value="Penge">Penge</option>
    <option value="Pentonville">Pentonville</option>
    <option value="Perivale">Perivale</option>
    <option value="Piccadilly">Piccadilly</option>
    <option value="Piccadilly Circus">Piccadilly Circus</option>
    <option value="Piccotts End">Piccotts End</option>
    <option value="Pimlico">Pimlico</option>
    <option value="Pinner">Pinner</option>
    <option value="Plaistow">Plaistow</option>
    <option value="Plumstead">Plumstead</option>
    <option value="Ponders End">Ponders End</option>
    <option value="Poplar">Poplar</option>
    <option value="Potters Bar">Potters Bar</option>
    <option value="Poyle">Poyle</option>
    <option value="Primrose Hill">Primrose Hill</option>
    <option value="Purfleet">Purfleet</option>
    <option value="Purley">Purley</option>
    <option value="Putney">Putney</option>
    <option value="Queens Park">Queens Park</option>
    <option value="Queensway">Queensway</option>
    <option value="Radleft">Radleft</option>
    <option value="Rainham">Rainham</option>
    <option value="Ravenscourt Park">Ravenscourt Park</option>
    <option value="Raynes Park">Raynes Park</option>
    <option value="Redbridge">Redbridge</option>
    <option value="Regents Park">Regents Park</option>
    <option value="Richmond">Richmond</option>
    <option value="Richmond Park">Richmond Park</option>
    <option value="Richmond Upon Thames">Richmond Upon Thames</option>
    <option value="Roehampton">Roehampton</option>
    <option value="Romford">Romford</option>
    <option value="Rotherhithe">Rotherhithe</option>
    <option value="Ruislip">Ruislip</option>
    <option value="Rush Green">Rush Green</option>
    <option value="Sanderstead">Sanderstead</option>
    <option value="Seven Kings">Seven Kings</option>
    <option value="Sevenkings">Sevenkings</option>
    <option value="Sheen">Sheen</option>
    <option value="Shepherds Bush">Shepherds Bush</option>
    <option value="Shepperton">Shepperton</option>
    <option value="Shirley">Shirley</option>
    <option value="Shooters Hill">Shooters Hill</option>
    <option value="Shoreditch">Shoreditch</option>
    <option value="Sidcup">Sidcup</option>
    <option value="Silvertown">Silvertown</option>
    <option value="Singhewell">Singhewell</option>
    <option value="Slough">Slough</option>
    <option value="Smithfield">Smithfield</option>
    <option value="Soho">Soho</option>
    <option value="South Bank">South Bank</option>
    <option value="South Croydon">South Croydon</option>
    <option value="South Kensington">South Kensington</option>
    <option value="South Norwood">South Norwood</option>
    <option value="South Ockendon">South Ockendon</option>
    <option value="South Oxhey">South Oxhey</option>
    <option value="South Ruislip">South Ruislip</option>
    <option value="South Woodford">South Woodford</option>
    <option value="Southall">Southall</option>
    <option value="Southgate">Southgate</option>
    <option value="Southwark">Southwark</option>
    <option value="Spitalfields">Spitalfields</option>
    <option value="St James's">St James's</option>
    <option value="St Johns Wood">St Johns Wood</option>
    <option value="St Katherines Dock">St Katherines Dock</option>
    <option value="St Mary Cray">St Mary Cray</option>
    <option value="St Pancras">St Pancras</option>
    <option value="St Pauls">St Pauls</option>
    <option value="Staines">Staines</option>
    <option value="Stamford Hill">Stamford Hill</option>
    <option value="Stanmore">Stanmore</option>
    <option value="Stepney">Stepney</option>
    <option value="Stepney Green">Stepney Green</option>
    <option value="Stockwell">Stockwell</option>
    <option value="Stoke d'Abernon">Stoke d'Abernon</option>
    <option value="Stoke Newington">Stoke Newington</option>
    <option value="Stonewood">Stonewood</option>
    <option value="Strand">Strand</option>
    <option value="Stratford">Stratford</option>
    <option value="Streatham">Streatham</option>
    <option value="Sudbury Hill">Sudbury Hill</option>
    <option value="Sunbury">Sunbury</option>
    <option value="Sunbury On Thames">Sunbury On Thames</option>
    <option value="Surbiton">Surbiton</option>
    <option value="Sutton">Sutton</option>
    <option value="Swanley">Swanley</option>
    <option value="Swanscombe">Swanscombe</option>
    <option value="Swiss Cottage">Swiss Cottage</option>
    <option value="Sydenham">Sydenham</option>
    <option value="Teddington">Teddington</option>
    <option value="Temple">Temple</option>
    <option value="Temple Place">Temple Place</option>
    <option value="Thamesmead">Thamesmead</option>
    <option value="The City">The City</option>
    <option value="Thornton Heath">Thornton Heath</option>
    <option value="Tolworth">Tolworth</option>
    <option value="Tooting">Tooting</option>
    <option value="Tottenham">Tottenham</option>
    <option value="Totteridge">Totteridge</option>
    <option value="Tower Bridge">Tower Bridge</option>
    <option value="Tower Bridge Side">Tower Bridge Side</option>
    <option value="Tower Hamlets">Tower Hamlets</option>
    <option value="Tower Hill">Tower Hill</option>
    <option value="Trafalgar Square">Trafalgar Square</option>
    <option value="Tufnell Park">Tufnell Park</option>
    <option value="Tulse Hill">Tulse Hill</option>
    <option value="Twickenham">Twickenham</option>
    <option value="Upminster">Upminster</option>
    <option value="Upton">Upton</option>
    <option value="Uxbridge">Uxbridge</option>
    <option value="Vauxhall">Vauxhall</option>
    <option value="Victoria">Victoria</option>
    <option value="Wallington">Wallington</option>
    <option value="Waltham Forest">Waltham Forest</option>
    <option value="Walthamstow">Walthamstow</option>
    <option value="Walworth">Walworth</option>
    <option value="Wandsworth">Wandsworth</option>
    <option value="Wanstead">Wanstead</option>
    <option value="Wapping">Wapping</option>
    <option value="Waterloo">Waterloo</option>
    <option value="Watford">Watford</option>
    <option value="Wealdstone">Wealdstone</option>
    <option value="Welling">Welling</option>
    <option value="Wembley">Wembley</option>
    <option value="West Brompton">West Brompton</option>
    <option value="West Byfleet">West Byfleet</option>
    <option value="West Chelsea">West Chelsea</option>
    <option value="West Drayton">West Drayton</option>
    <option value="West End">West End</option>
    <option value="West Ham">West Ham</option>
    <option value="West Hampstead">West Hampstead</option>
    <option value="West Kensington">West Kensington</option>
    <option value="West Norwood">West Norwood</option>
    <option value="West Smithfield">West Smithfield</option>
    <option value="West Thurrock">West Thurrock</option>
    <option value="West Tilbury">West Tilbury</option>
    <option value="West Wickham">West Wickham</option>
    <option value="Westminster">Westminster</option>
    <option value="Weybridge">Weybridge</option>
    <option value="Whetstone">Whetstone</option>
    <option value="Whitechapel">Whitechapel</option>
    <option value="Whitehall">Whitehall</option>
    <option value="Whitton">Whitton</option>
    <option value="Willesden">Willesden</option>
    <option value="Willesden Green">Willesden Green</option>
    <option value="Wimbledon">Wimbledon</option>
    <option value="Winchmore Hill">Winchmore Hill</option>
    <option value="Windsor">Windsor</option>
    <option value="Wood Green">Wood Green</option>
    <option value="Woodford Bridge">Woodford Bridge</option>
    <option value="Woodford Green">Woodford Green</option>
    <option value="Woolwich">Woolwich</option>
    <option value="Worcester Park">Worcester Park</option>
    <option value="Yeading">Yeading</option>
    <optgroup label="UK Cities">
    <option value="Basingstoke">Basingstoke</option>
    <option value="Birmingham">Birmingham</option>
    <option value="Bournemouth">Bournemouth</option>
    <option value="Bracknell">Bracknell</option>
    <option value="Brighton">Brighton</option>
    <option value="Bristol">Bristol</option>
    <option value="Cambridge">Cambridge</option>
    <option value="Cardiff">Cardiff</option>
    <option value="Coventry">Coventry</option>
    <option value="Farnborough">Farnborough</option>
    <option value="Guildford">Guildford</option>
    <option value="Leicester">Leicester</option>
    <option value="Liverpool">Liverpool</option>
    <option value="Maidenhead">Maidenhead</option>
    <option value="Maidstone">Maidstone</option>
    <option value="Manchester">Manchester</option>
    <option value="Milton Keynes">Milton Keynes</option>
    <option value="Newbury">Newbury</option>
    <option value="Northampton">Northampton</option>
    <option value="Oxford">Oxford</option>
    <option value="Plymouth">Plymouth</option>
    <option value="Reading">Reading</option>
    <option value="Slough">Slough</option>
    <option value="Swindon">Swindon</option>
    <option value="Windsor">Windsor</option>
    <optgroup label="UK Airports">
    <option value="Aberdeen (ABZ)">Aberdeen (ABZ)</option>
    <option value="Belfast (BFS)">Belfast (BFS)</option>
    <option value="Birmingham (BHX)">Birmingham (BHX)</option>
    <option value="Blackpool (BLK)">Blackpool (BLK)</option>
    <option value="Bournemouth (BOH)">Bournemouth (BOH)</option>
    <option value="Bristol (BRS)">Bristol (BRS)</option>
    <option value="Cardiff (CWL)">Cardiff (CWL)</option>
    <option value="Coventry (CVT)">Coventry (CVT)</option>
    <option value="Durham Tees(MME)">Durham Tees(MME)</option>
    <option value="East Midlands (EMA)">East Midlands (EMA)</option>
    <option value="Exeter (EXT)">Exeter (EXT)</option>
    <option value="Belfast City (BHD)">Belfast City (BHD)</option>
    <option value="Glasgow (PIK)">Glasgow (PIK)</option>
    <option value="Leeds Bradford (LBA)">Leeds Bradford (LBA)</option>
    <option value="Liverpool (LPL)">Liverpool (LPL)</option>
    <option value="London City (LCY)">London City (LCY)</option>
    <option value="London Gatwick (LGW)">London Gatwick (LGW)</option>
    <option value="London Luton (LTN)">London Luton (LTN)</option>
    <option value="London Southend (SEN)">London Southend (SEN)</option>
    <option value="London Stansted (STN)">London Stansted (STN)</option>
    <option value="Manchester (MAN)">Manchester (MAN)</option>
    <option value="Newcastle (NCL)">Newcastle (NCL)</option>
    <option value="Norwich (NWI)">Norwich (NWI)</option>
    <option value="Plymouth City (PLH)">Plymouth City (PLH)</option>
    <option value="Southampton (SOU)">Southampton (SOU)</option>
    <optgroup label="UK Seaports">
    <option value="Dover">Dover</option>
    <option value="Felixstowe">Felixstowe</option>
    <option value="Folkestone">Folkestone</option>
    <option value="Harwich">Harwich</option>
    <option value="Portsmouth">Portsmouth</option>
    <option value="Southampton">Southampton</option>
    <optgroup label="Train Stations">
    <option value="Blackfriars">Blackfriars</option>
    <option value="Cannon Street">Cannon Street</option>
    <option value="Charing Cross">Charing Cross</option>
    <option value="City Thameslink">City Thameslink</option>
    <option value="Euston">Euston</option>
    <option value="Farringdon">Farringdon</option>
    <option value="Fenchurch Street">Fenchurch Street</option>
    <option value="Kings Cross">Kings Cross</option>
    <option value="Leicester Square">Leicester Square</option>
    <option value="Liverpool Street">Liverpool Street</option>
    <option value="London Bridge">London Bridge</option>
    <option value="Marylebone">Marylebone</option>
    <option value="Moorgate">Moorgate</option>
    <option value="Oxford Circus">Oxford Circus</option>
    <option value="Paddington">Paddington</option>
    <option value="St Pancras">St Pancras</option>
    <option value="Victoria">Victoria</option>
    <option value="Waterloo">Waterloo</option>
    <option value="Waterloo East">Waterloo East</option>
    </select>
    
    		</td>
            <td class="rcol"></td>
        </tr>
        <tr>
            <td class="base"></td>
            <td class="mid"></td>
            <td class="base2"></td>
        </tr>
    
    </table>
    
    
    </td>
    		<td width="200" align="left" valign="top">
    		
    		
    		</td>
    	</tr>
    </table>
    
    </div>
    </div>
    </body>
    
    </html>

  7. #7
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I'll have a look and get back to you.

  8. #8
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    o.k. I've tested this on IE6 and FF3. I would test it on IE7 if all our users here weren't still in the dark ages but thats another matter.

    HTML - I tidied it up a bit and removed your table. You'll have to forgive my dislike of tables for anything other than displaying data. I've just put the master select in a div. I assume this select will eventually be filled on the server side?

    Code:
    <!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=iso-8859-1" />
    <title>London Heathrow Cars | Heathrow Airport Transfers | Private Hire Cab Service | London UK</title>
    <meta name="description" content="Based at London Heathrow Airport (LHR). Pre-book or call on arrival. Set Fares - No taxi meters; (to London from 23) private transfers to and from all UK." />
    <meta name="keywords" content="heathrow taxi,taxi from heathrow,taxi to heathrow,heathrow taxi prices,london heathrow airport,airport transfer service,london,airport,uk,taxi" />
    <link rel="stylesheet" type="text/css" href="scripts/style.css" media="all" />
    <script type="text/javascript" src="scripts/js.js"></script>
    
    </head>
    
    <body>
    
    <form method="post" action="HTMLPage.htm">
        <div id="selectarea">
    	<select name="master" id="master">
    	        <option value="0">Select Postcode</option>
            <optgroup label="London Postcodes">
                <option value="BR1">BR1</option>
                <option value="BR2">BR2</option>
                <option value="BR3">BR3</option>
                <option value="BR4">BR4</option>
                <option value="BR5">BR5</option>
                <option value="BR6">BR6</option>
                <option value="BR7">BR7</option>
                <option value="BR8">BR8</option>
                <option value="CR0">CR0</option>
                <option value="CR1">CR1</option>
                <option value="CR2">CR2</option>
                <option value="CR3">CR3</option>
                <option value="CR4">CR4</option>
                <option value="CR5">CR5</option>
                <option value="CR6">CR6</option>
                <option value="CR7">CR7</option>
                <option value="CR8">CR8</option>
                <option value="CR9">CR9</option>
                <option value="DA1">DA1</option>
                <option value="DA10">DA10</option>
                <option value="DA11">DA11</option>
                <option value="DA12">DA12</option>
                <option value="DA13">DA13</option>
                <option value="DA14">DA14</option>
                <option value="DA15">DA15</option>
                <option value="DA16">DA16</option>
                <option value="DA17">DA17</option>
                <option value="DA18">DA18</option>
                <option value="DA2">DA2</option>
                <option value="DA3">DA3</option>
                <option value="DA4">DA4</option>
                <option value="DA5">DA5</option>
                <option value="DA6">DA6</option>
                <option value="DA7">DA7</option>
                <option value="DA8">DA8</option>
                <option value="DA9">DA9</option>
                <option value="E1">E1</option>
                <option value="E10">E10</option>
                <option value="E11">E11</option>
                <option value="E12">E12</option>
                <option value="E13">E13</option>
                <option value="E14">E14</option>
                <option value="E15">E15</option>
                <option value="E16">E16</option>
                <option value="E17">E17</option>
                <option value="E18">E18</option>
                <option value="E2">E2</option>
                <option value="E3">E3</option>
                <option value="E4">E4</option>
                <option value="E5">E5</option>
                <option value="E6">E6</option>
                <option value="E7">E7</option>
                <option value="E8">E8</option>
                <option value="E9">E9</option>
                <option value="EC1">EC1</option>
                <option value="EC2">EC2</option>
                <option value="EC3">EC3</option>
                <option value="EC4">EC4</option>
                <option value="EN1">EN1</option>
                <option value="EN2">EN2</option>
                <option value="EN3">EN3</option>
                <option value="EN4">EN4</option>
                <option value="EN5">EN5</option>
                <option value="HA0">HA0</option>
                <option value="HA1">HA1</option>
                <option value="HA2">HA2</option>
                <option value="HA3">HA3</option>
                <option value="HA4">HA4</option>
                <option value="HA5">HA5</option>
                <option value="HA6">HA6</option>
                <option value="HA7">HA7</option>
                <option value="HA8">HA8</option>
                <option value="HA9">HA9</option>
                <option value="HP1">HP1</option>
                <option value="HP2">HP2</option>
                <option value="HP3">HP3</option>
                <option value="HP4">HP4</option>
                <option value="HP5">HP5</option>
                <option value="HP6">HP6</option>
                <option value="HP7">HP7</option>
                <option value="HP8">HP8</option>
                <option value="HP9">HP9</option>
                <option value="IG1">IG1</option>
                <option value="IG10">IG10</option>
                <option value="IG11">IG11</option>
                <option value="IG2">IG2</option>
                <option value="IG3">IG3</option>
                <option value="IG4">IG4</option>
                <option value="IG5">IG5</option>
                <option value="IG6">IG6</option>
                <option value="IG7">IG7</option>
                <option value="IG8">IG8</option>
                <option value="IG9">IG9</option>
                <option value="KT1">KT1</option>
                <option value="KT10">KT10</option>
                <option value="KT11">KT11</option>
                <option value="KT12">KT12</option>
                <option value="KT13">KT13</option>
                <option value="KT14">KT14</option>
                <option value="KT15">KT15</option>
                <option value="KT16">KT16</option>
                <option value="KT17">KT17</option>
                <option value="KT18">KT18</option>
                <option value="KT19">KT19</option>
                <option value="KT2">KT2</option>
                <option value="KT3">KT3</option>
                <option value="KT4">KT4</option>
                <option value="KT5">KT5</option>
                <option value="KT6">KT6</option>
                <option value="KT7">KT7</option>
                <option value="KT8">KT8</option>
                <option value="KT9">KT9</option>
                <option value="N1">N1</option>
                <option value="N10">N10</option>
                <option value="N11">N11</option>
                <option value="N12">N12</option>
                <option value="N13">N13</option>
                <option value="N14">N14</option>
                <option value="N15">N15</option>
                <option value="N16">N16</option>
                <option value="N17">N17</option>
                <option value="N18">N18</option>
                <option value="N19">N19</option>
                <option value="N2">N2</option>
                <option value="N20">N20</option>
                <option value="N21">N21</option>
                <option value="N22">N22</option>
                <option value="N3">N3</option>
                <option value="N4">N4</option>
                <option value="N5">N5</option>
                <option value="N6">N6</option>
                <option value="N7">N7</option>
                <option value="N8">N8</option>
                <option value="N9">N9</option>
                <option value="NW1">NW1</option>
                <option value="NW10">NW10</option>
                <option value="NW11">NW11</option>
                <option value="NW2">NW2</option>
                <option value="NW3">NW3</option>
                <option value="NW4">NW4</option>
                <option value="NW5">NW5</option>
                <option value="NW6">NW6</option>
                <option value="NW7">NW7</option>
                <option value="NW8">NW8</option>
                <option value="NW9">NW9</option>
                <option value="RM1">RM1</option>
                <option value="RM10">RM10</option>
                <option value="RM11">RM11</option>
                <option value="RM12">RM12</option>
                <option value="RM13">RM13</option>
                <option value="RM14">RM14</option>
                <option value="RM15">RM15</option>
                <option value="RM16">RM16</option>
                <option value="RM17">RM17</option>
                <option value="RM18">RM18</option>
                <option value="RM19">RM19</option>
                <option value="RM2">RM2</option>
                <option value="RM20">RM20</option>
                <option value="RM3">RM3</option>
                <option value="RM4">RM4</option>
                <option value="RM5">RM5</option>
                <option value="RM6">RM6</option>
                <option value="RM7">RM7</option>
                <option value="RM8">RM8</option>
                <option value="RM9">RM9</option>
                <option value="SE1">SE1</option>
                <option value="SE10">SE10</option>
                <option value="SE11">SE11</option>
                <option value="SE12">SE12</option>
                <option value="SE13">SE13</option>
                <option value="SE14">SE14</option>
                <option value="SE15">SE15</option>
                <option value="SE16">SE16</option>
                <option value="SE17">SE17</option>
                <option value="SE18">SE18</option>
                <option value="SE19">SE19</option>
                <option value="SE2">SE2</option>
                <option value="SE20">SE20</option>
                <option value="SE21">SE21</option>
                <option value="SE22">SE22</option>
                <option value="SE23">SE23</option>
                <option value="SE24">SE24</option>
                <option value="SE25">SE25</option>
                <option value="SE26">SE26</option>
                <option value="SE27">SE27</option>
                <option value="SE28">SE28</option>
                <option value="SE3">SE3</option>
                <option value="SE4">SE4</option>
                <option value="SE5">SE5</option>
                <option value="SE6">SE6</option>
                <option value="SE7">SE7</option>
                <option value="SE8">SE8</option>
                <option value="SE9">SE9</option>
                <option value="SL0">SL0</option>
                <option value="SL1">SL1</option>
                <option value="SL2">SL2</option>
                <option value="SL3">SL3</option>
                <option value="SL4">SL4</option>
                <option value="SL5">SL5</option>
                <option value="SM1">SM1</option>
                <option value="SM2">SM2</option>
                <option value="SM3">SM3</option>
                <option value="SM4">SM4</option>
                <option value="SM5">SM5</option>
                <option value="SM6">SM6</option>
                <option value="SM7">SM7</option>
                <option value="SW1">SW1</option>
                <option value="SW10">SW10</option>
                <option value="SW11">SW11</option>
                <option value="SW12">SW12</option>
                <option value="SW13">SW13</option>
                <option value="SW14">SW14</option>
                <option value="SW15">SW15</option>
                <option value="SW16">SW16</option>
                <option value="SW17">SW17</option>
                <option value="SW18">SW18</option>
                <option value="SW19">SW19</option>
                <option value="SW2">SW2</option>
                <option value="SW20">SW20</option>
                <option value="SW3">SW3</option>
                <option value="SW4">SW4</option>
                <option value="SW5">SW5</option>
                <option value="SW6">SW6</option>
                <option value="SW7">SW7</option>
                <option value="SW8">SW8</option>
                <option value="SW9">SW9</option>
                <option value="TN14">TN14</option>
                <option value="TN16">TN16</option>
                <option value="TW1">TW1</option>
                <option value="TW10">TW10</option>
                <option value="TW11">TW11</option>
                <option value="TW12">TW12</option>
                <option value="TW13">TW13</option>
                <option value="TW14">TW14</option>
                <option value="TW15">TW15</option>
                <option value="TW16">TW16</option>
                <option value="TW17">TW17</option>
                <option value="TW18">TW18</option>
                <option value="TW19">TW19</option>
                <option value="TW2">TW2</option>
                <option value="TW20">TW20</option>
                <option value="TW3">TW3</option>
                <option value="TW4">TW4</option>
                <option value="TW5">TW5</option>
                <option value="TW6">TW6</option>
                <option value="TW7">TW7</option>
                <option value="TW8">TW8</option>
                <option value="TW9">TW9</option>
                <option value="UB1">UB1</option>
                <option value="UB10">UB10</option>
                <option value="UB2">UB2</option>
                <option value="UB3">UB3</option>
                <option value="UB4">UB4</option>
                <option value="UB5">UB5</option>
                <option value="UB6">UB6</option>
                <option value="UB7">UB7</option>
                <option value="UB8">UB8</option>
                <option value="UB9">UB9</option>
                <option value="W1">W1</option>
                <option value="W10">W10</option>
                <option value="W11">W11</option>
                <option value="W12">W12</option>
                <option value="W13">W13</option>
                <option value="W14">W14</option>
                <option value="W2">W2</option>
                <option value="W3">W3</option>
                <option value="W4">W4</option>
                <option value="W5">W5</option>
                <option value="W6">W6</option>
                <option value="W7">W7</option>
                <option value="W8">W8</option>
                <option value="W9">W9</option>
                <option value="WC1">WC1</option>
                <option value="WC2">WC2</option>
                <option value="WD17">WD17</option>
                <option value="WD18">WD18</option>
                <option value="WD19">WD19</option>
                <option value="WD23">WD23</option>
                <option value="WD24">WD24</option>
                <option value="WD25">WD25</option>
                <option value="WD3">WD3</option>
                <option value="WD4">WD4</option>
                <option value="WD5">WD5</option>
                <option value="WD6">WD6</option>
                <option value="WD7">WD7</option>
            <optgroup label="London Area Names">
                <option value="Abbey Wood">Abbey Wood</option>
                <option value="Acton">Acton</option>
                <option value="Addington">Addington</option>
                <option value="Addlestone">Addlestone</option>
                <option value="Aldbury">Aldbury</option>
                <option value="Aldenham">Aldenham</option>
                <option value="Aldgate">Aldgate</option>
                <option value="Aldwych">Aldwych</option>
                <option value="Amersham">Amersham</option>
                <option value="Angel">Angel</option>
                <option value="Archway">Archway</option>
                <option value="Ascot">Ascot</option>
                <option value="Ashford">Ashford</option>
                <option value="Ashted">Ashted</option>
                <option value="Baker Street">Baker Street</option>
                <option value="Balham">Balham</option>
                <option value="Bank">Bank</option>
                <option value="Bankside">Bankside</option>
                <option value="Banstead">Banstead</option>
                <option value="Barbican">Barbican</option>
                <option value="Barking">Barking</option>
                <option value="Barkingside">Barkingside</option>
                <option value="Barnes">Barnes</option>
                <option value="Barnet">Barnet</option>
                <option value="Battersea">Battersea</option>
                <option value="Bayswater">Bayswater</option>
                <option value="Beaconsfield">Beaconsfield</option>
                <option value="Beckenham">Beckenham</option>
                <option value="Beckton">Beckton</option>
                <option value="Becontree">Becontree</option>
                <option value="Bedmond">Bedmond</option>
                <option value="Belgravia">Belgravia</option>
                <option value="Belmont">Belmont</option>
                <option value="Belsize Park">Belsize Park</option>
                <option value="Belvedere">Belvedere</option>
                <option value="Bermondsey">Bermondsey</option>
                <option value="Berrylands">Berrylands</option>
                <option value="Bethnal Green">Bethnal Green</option>
                <option value="Bexley">Bexley</option>
                <option value="Bexleyheath">Bexleyheath</option>
                <option value="Blackfriars">Blackfriars</option>
                <option value="Blackheath">Blackheath</option>
                <option value="Blackwall">Blackwall</option>
                <option value="Bloomsbury">Bloomsbury</option>
                <option value="Borehamwood">Borehamwood</option>
                <option value="Bow">Bow</option>
                <option value="Brent">Brent</option>
                <option value="Brent Cross">Brent Cross</option>
                <option value="Brentford">Brentford</option>
                <option value="Brixton">Brixton</option>
                <option value="Broad Street">Broad Street</option>
                <option value="Broadgate">Broadgate</option>
                <option value="Brockley">Brockley</option>
                <option value="Bromley">Bromley</option>
                <option value="Brondesbury">Brondesbury</option>
                <option value="Brook Greeen">Brook Greeen</option>
                <option value="Brook Green">Brook Green</option>
                <option value="Buckhurst Hill">Buckhurst Hill</option>
                <option value="Bushey">Bushey</option>
                <option value="Camberwell">Camberwell</option>
                <option value="Camden">Camden</option>
                <option value="Camden Town">Camden Town</option>
                <option value="Canary Wharf">Canary Wharf</option>
                <option value="Canning Town">Canning Town</option>
                <option value="Canonbury">Canonbury</option>
                <option value="Carshalton">Carshalton</option>
                <option value="Caterham">Caterham</option>
                <option value="Catford">Catford</option>
                <option value="Chadwell Heath">Chadwell Heath</option>
                <option value="Chalfont St Giles">Chalfont St Giles</option>
                <option value="Charing Cross">Charing Cross</option>
                <option value="Charlton">Charlton</option>
                <option value="Cheam">Cheam</option>
                <option value="Chelsea">Chelsea</option>
                <option value="Chelsfield">Chelsfield</option>
                <option value="Chesham">Chesham</option>
                <option value="Chessington">Chessington</option>
                <option value="Chingford">Chingford</option>
                <option value="Chipperfield">Chipperfield</option>
                <option value="Chislehurst">Chislehurst</option>
                <option value="Chiswick">Chiswick</option>
                <option value="Clapham">Clapham</option>
                <option value="Clapham Common">Clapham Common</option>
                <option value="Clapham Junction">Clapham Junction</option>
                <option value="Clapham North">Clapham North</option>
                <option value="Clapton">Clapton</option>
                <option value="Clayhall">Clayhall</option>
                <option value="Clerkenwell">Clerkenwell</option>
                <option value="Cockfosters">Cockfosters</option>
                <option value="Coleshill">Coleshill</option>
                <option value="Collier Row">Collier Row</option>
                <option value="Coulsdon">Coulsdon</option>
                <option value="Countywide">Countywide</option>
                <option value="Covent Garden">Covent Garden</option>
                <option value="Cowley">Cowley</option>
                <option value="Crayford">Crayford</option>
                <option value="Crews Hill">Crews Hill</option>
                <option value="Cricklewood">Cricklewood</option>
                <option value="Crouch End">Crouch End</option>
                <option value="Croxley Green">Croxley Green</option>
                <option value="Croydon">Croydon</option>
                <option value="Crystal Palace">Crystal Palace</option>
                <option value="Cudham">Cudham</option>
                <option value="Dagenham">Dagenham</option>
                <option value="Dalston">Dalston</option>
                <option value="Dartford">Dartford</option>
                <option value="Deptford">Deptford</option>
                <option value="Docklands">Docklands</option>
                <option value="Dollis Hill">Dollis Hill</option>
                <option value="Dulwich">Dulwich</option>
                <option value="Ealing">Ealing</option>
                <option value="Earls Court">Earls Court</option>
                <option value="East Bedfont">East Bedfont</option>
                <option value="East Dulwich">East Dulwich</option>
                <option value="East Finchley">East Finchley</option>
                <option value="East Ham">East Ham</option>
                <option value="East Sheen">East Sheen</option>
                <option value="Eastcote">Eastcote</option>
                <option value="Edgware">Edgware</option>
                <option value="Edgware Road">Edgware Road</option>
                <option value="Edmonton">Edmonton</option>
                <option value="Edmonton Lower">Edmonton Lower</option>
                <option value="Egham">Egham</option>
                <option value="Elephant & Castle">Elephant & Castle</option>
                <option value="Elm Park">Elm Park</option>
                <option value="Eltham">Eltham</option>
                <option value="Embankment">Embankment</option>
                <option value="Emerson Park">Emerson Park</option>
                <option value="Enfield">Enfield</option>
                <option value="Enfield Town">Enfield Town</option>
                <option value="Erith">Erith</option>
                <option value="Esher">Esher</option>
                <option value="Euston">Euston</option>
                <option value="Euston Square">Euston Square</option>
                <option value="Ewell">Ewell</option>
                <option value="Exchange Square">Exchange Square</option>
                <option value="Farleigh">Farleigh</option>
                <option value="Farnham Common">Farnham Common</option>
                <option value="Farningham">Farningham</option>
                <option value="Farringdon">Farringdon</option>
                <option value="Feltham">Feltham</option>
                <option value="Finchley">Finchley</option>
                <option value="Finchley Road">Finchley Road</option>
                <option value="Finsbury">Finsbury</option>
                <option value="Finsbury Park">Finsbury Park</option>
                <option value="Fitzrovia">Fitzrovia</option>
                <option value="Fleet Street">Fleet Street</option>
                <option value="Footscray">Footscray</option>
                <option value="Forest Gate">Forest Gate</option>
                <option value="Forest Hill">Forest Hill</option>
                <option value="Friern Barnet">Friern Barnet</option>
                <option value="Fulham">Fulham</option>
                <option value="Gants Hill">Gants Hill</option>
                <option value="Gidea Park">Gidea Park</option>
                <option value="Golders Green">Golders Green</option>
                <option value="Gravesend">Gravesend</option>
                <option value="Grays">Grays</option>
                <option value="Grays Inn">Grays Inn</option>
                <option value="Green Park">Green Park</option>
                <option value="Greenford">Greenford</option>
                <option value="Greenwich">Greenwich</option>
                <option value="Greenwich Park">Greenwich Park</option>
                <option value="Grove Park & Lee">Grove Park & Lee</option>
                <option value="Hackney">Hackney</option>
                <option value="Hadley Wood">Hadley Wood</option>
                <option value="Hainault">Hainault</option>
                <option value="Ham">Ham</option>
                <option value="Hammersmith">Hammersmith</option>
                <option value="Hampstead">Hampstead</option>
                <option value="Hampton">Hampton</option>
                <option value="Hampton Wick">Hampton Wick</option>
                <option value="Hanwell">Hanwell</option>
                <option value="Harefield">Harefield</option>
                <option value="Haringey">Haringey</option>
                <option value="Harlington">Harlington</option>
                <option value="Harmondsworth">Harmondsworth</option>
                <option value="Harold Hill">Harold Hill</option>
                <option value="Harold Wood">Harold Wood</option>
                <option value="Harrow">Harrow</option>
                <option value="Harrow on Hill">Harrow on Hill</option>
                <option value="Hartley">Hartley</option>
                <option value="Hatton">Hatton</option>
                <option value="Hatton Garden">Hatton Garden</option>
                <option value="Havering">Havering</option>
                <option value="Havering-Atte-Bower">Havering-Atte-Bower</option>
                <option value="Hawley">Hawley</option>
                <option value="Hayes">Hayes</option>
                <option value="Haymarket">Haymarket</option>
                <option value="Hemel Hempstead">Hemel Hempstead</option>
                <option value="Hendon">Hendon</option>
                <option value="Herne Hill">Herne Hill</option>
                <option value="Hersham">Hersham</option>
                <option value="Heston">Heston</option>
                <option value="Highbury">Highbury</option>
                <option value="Highgate">Highgate</option>
                <option value="Hillingdon">Hillingdon</option>
                <option value="Holborn">Holborn</option>
                <option value="Holland Park">Holland Park</option>
                <option value="Holloway">Holloway</option>
                <option value="Homerton">Homerton</option>
                <option value="Honor Oak">Honor Oak</option>
                <option value="Hook">Hook</option>
                <option value="Hooley">Hooley</option>
                <option value="Hornchurch">Hornchurch</option>
                <option value="Hornsey">Hornsey</option>
                <option value="Hounslow">Hounslow</option>
                <option value="Hounslow West">Hounslow West</option>
                <option value="Hoxton">Hoxton</option>
                <option value="Hyde Park">Hyde Park</option>
                <option value="Hyde Park Corner">Hyde Park Corner</option>
                <option value="Ickenham">Ickenham</option>
                <option value="Ilford">Ilford</option>
                <option value="Isle Of Dogs">Isle Of Dogs</option>
                <option value="Isleworth">Isleworth</option>
                <option value="Islington">Islington</option>
                <option value="Kenley">Kenley</option>
                <option value="Kennington">Kennington</option>
                <option value="Kensal Green">Kensal Green</option>
                <option value="Kensal Rise">Kensal Rise</option>
                <option value="Kensington">Kensington</option>
                <option value="Kentish Town">Kentish Town</option>
                <option value="Kenton">Kenton</option>
                <option value="Keston">Keston</option>
                <option value="Kew">Kew</option>
                <option value="Kidbrooke">Kidbrooke</option>
                <option value="Kilburn">Kilburn</option>
                <option value="Kings Cross">Kings Cross</option>
                <option value="Kingsbury">Kingsbury</option>
                <option value="Kingston">Kingston</option>
                <option value="Kingston Upon Thames">Kingston Upon Thames</option>
                <option value="Kingston Vale">Kingston Vale</option>
                <option value="Knightsbridge">Knightsbridge</option>
                <option value="Ladbroke Grove">Ladbroke Grove</option>
                <option value="Lambeth">Lambeth</option>
                <option value="Lancaster Gate">Lancaster Gate</option>
                <option value="Langley">Langley</option>
                <option value="Leicester Square">Leicester Square</option>
                <option value="Leverstock Green">Leverstock Green</option>
                <option value="Lewisham">Lewisham</option>
                <option value="Leyton">Leyton</option>
                <option value="Leytonstone">Leytonstone</option>
                <option value="Limehouse">Limehouse</option>
                <option value="Little Venice">Little Venice</option>
                <option value="Liverpool Street">Liverpool Street</option>
                <option value="London Bridge">London Bridge</option>
                <option value="London Wall">London Wall</option>
                <option value="Longford">Longford</option>
                <option value="Loughton">Loughton</option>
                <option value="Lyne">Lyne</option>
                <option value="Maida Vale">Maida Vale</option>
                <option value="Manor Park">Manor Park</option>
                <option value="Marble Arch">Marble Arch</option>
                <option value="Marylebone">Marylebone</option>
                <option value="Mayfair">Mayfair</option>
                <option value="Meopham">Meopham</option>
                <option value="Merton">Merton</option>
                <option value="Mill Hill">Mill Hill</option>
                <option value="Mitcham">Mitcham</option>
                <option value="Molesey">Molesey</option>
                <option value="Monument">Monument</option>
                <option value="Moorgate">Moorgate</option>
                <option value="Morden">Morden</option>
                <option value="Mort Lake">Mort Lake</option>
                <option value="Mortlake">Mortlake</option>
                <option value="Mottingham">Mottingham</option>
                <option value="Muswell Hill">Muswell Hill</option>
                <option value="Neasden">Neasden</option>
                <option value="New Cross">New Cross</option>
                <option value="New Malden">New Malden</option>
                <option value="Newbury Park">Newbury Park</option>
                <option value="Newham">Newham</option>
                <option value="Norbiton">Norbiton</option>
                <option value="Norbury">Norbury</option>
                <option value="North Acton">North Acton</option>
                <option value="North Cray">North Cray</option>
                <option value="North Finchley">North Finchley</option>
                <option value="North Kensington">North Kensington</option>
                <option value="North Ockendon">North Ockendon</option>
                <option value="Northholt">Northholt</option>
                <option value="Northolt">Northolt</option>
                <option value="Northwood">Northwood</option>
                <option value="Norwood Green">Norwood Green</option>
                <option value="Norwood Upper">Norwood Upper</option>
                <option value="Noting Hill Gate">Noting Hill Gate</option>
                <option value="Notting Hill">Notting Hill</option>
                <option value="Old Oak Common">Old Oak Common</option>
                <option value="Old Street">Old Street</option>
                <option value="Olympia">Olympia</option>
                <option value="Orpington">Orpington</option>
                <option value="Osterley">Osterley</option>
                <option value="Oxford Circus">Oxford Circus</option>
                <option value="Oxford Street">Oxford Street</option>
                <option value="Paddington">Paddington</option>
                <option value="Palmers Green">Palmers Green</option>
                <option value="Park Lane">Park Lane</option>
                <option value="Park Royal">Park Royal</option>
                <option value="Parsons Green">Parsons Green</option>
                <option value="Passingford Bridge">Passingford Bridge</option>
                <option value="Peckham">Peckham</option>
                <option value="Penge">Penge</option>
                <option value="Pentonville">Pentonville</option>
                <option value="Perivale">Perivale</option>
                <option value="Piccadilly">Piccadilly</option>
                <option value="Piccadilly Circus">Piccadilly Circus</option>
                <option value="Piccotts End">Piccotts End</option>
                <option value="Pimlico">Pimlico</option>
                <option value="Pinner">Pinner</option>
                <option value="Plaistow">Plaistow</option>
                <option value="Plumstead">Plumstead</option>
                <option value="Ponders End">Ponders End</option>
                <option value="Poplar">Poplar</option>
                <option value="Potters Bar">Potters Bar</option>
                <option value="Poyle">Poyle</option>
                <option value="Primrose Hill">Primrose Hill</option>
                <option value="Purfleet">Purfleet</option>
                <option value="Purley">Purley</option>
                <option value="Putney">Putney</option>
                <option value="Queens Park">Queens Park</option>
                <option value="Queensway">Queensway</option>
                <option value="Radleft">Radleft</option>
                <option value="Rainham">Rainham</option>
                <option value="Ravenscourt Park">Ravenscourt Park</option>
                <option value="Raynes Park">Raynes Park</option>
                <option value="Redbridge">Redbridge</option>
                <option value="Regents Park">Regents Park</option>
                <option value="Richmond">Richmond</option>
                <option value="Richmond Park">Richmond Park</option>
                <option value="Richmond Upon Thames">Richmond Upon Thames</option>
                <option value="Roehampton">Roehampton</option>
                <option value="Romford">Romford</option>
                <option value="Rotherhithe">Rotherhithe</option>
                <option value="Ruislip">Ruislip</option>
                <option value="Rush Green">Rush Green</option>
                <option value="Sanderstead">Sanderstead</option>
                <option value="Seven Kings">Seven Kings</option>
                <option value="Sevenkings">Sevenkings</option>
                <option value="Sheen">Sheen</option>
                <option value="Shepherds Bush">Shepherds Bush</option>
                <option value="Shepperton">Shepperton</option>
                <option value="Shirley">Shirley</option>
                <option value="Shooters Hill">Shooters Hill</option>
                <option value="Shoreditch">Shoreditch</option>
                <option value="Sidcup">Sidcup</option>
                <option value="Silvertown">Silvertown</option>
                <option value="Singhewell">Singhewell</option>
                <option value="Slough">Slough</option>
                <option value="Smithfield">Smithfield</option>
                <option value="Soho">Soho</option>
                <option value="South Bank">South Bank</option>
                <option value="South Croydon">South Croydon</option>
                <option value="South Kensington">South Kensington</option>
                <option value="South Norwood">South Norwood</option>
                <option value="South Ockendon">South Ockendon</option>
                <option value="South Oxhey">South Oxhey</option>
                <option value="South Ruislip">South Ruislip</option>
                <option value="South Woodford">South Woodford</option>
                <option value="Southall">Southall</option>
                <option value="Southgate">Southgate</option>
                <option value="Southwark">Southwark</option>
                <option value="Spitalfields">Spitalfields</option>
                <option value="St James's">St James's</option>
                <option value="St Johns Wood">St Johns Wood</option>
                <option value="St Katherines Dock">St Katherines Dock</option>
                <option value="St Mary Cray">St Mary Cray</option>
                <option value="St Pancras">St Pancras</option>
                <option value="St Pauls">St Pauls</option>
                <option value="Staines">Staines</option>
                <option value="Stamford Hill">Stamford Hill</option>
                <option value="Stanmore">Stanmore</option>
                <option value="Stepney">Stepney</option>
                <option value="Stepney Green">Stepney Green</option>
                <option value="Stockwell">Stockwell</option>
                <option value="Stoke d'Abernon">Stoke d'Abernon</option>
                <option value="Stoke Newington">Stoke Newington</option>
                <option value="Stonewood">Stonewood</option>
                <option value="Strand">Strand</option>
                <option value="Stratford">Stratford</option>
                <option value="Streatham">Streatham</option>
                <option value="Sudbury Hill">Sudbury Hill</option>
                <option value="Sunbury">Sunbury</option>
                <option value="Sunbury On Thames">Sunbury On Thames</option>
                <option value="Surbiton">Surbiton</option>
                <option value="Sutton">Sutton</option>
                <option value="Swanley">Swanley</option>
                <option value="Swanscombe">Swanscombe</option>
                <option value="Swiss Cottage">Swiss Cottage</option>
                <option value="Sydenham">Sydenham</option>
                <option value="Teddington">Teddington</option>
                <option value="Temple">Temple</option>
                <option value="Temple Place">Temple Place</option>
                <option value="Thamesmead">Thamesmead</option>
                <option value="The City">The City</option>
                <option value="Thornton Heath">Thornton Heath</option>
                <option value="Tolworth">Tolworth</option>
                <option value="Tooting">Tooting</option>
                <option value="Tottenham">Tottenham</option>
                <option value="Totteridge">Totteridge</option>
                <option value="Tower Bridge">Tower Bridge</option>
                <option value="Tower Bridge Side">Tower Bridge Side</option>
                <option value="Tower Hamlets">Tower Hamlets</option>
                <option value="Tower Hill">Tower Hill</option>
                <option value="Trafalgar Square">Trafalgar Square</option>
                <option value="Tufnell Park">Tufnell Park</option>
                <option value="Tulse Hill">Tulse Hill</option>
                <option value="Twickenham">Twickenham</option>
                <option value="Upminster">Upminster</option>
                <option value="Upton">Upton</option>
                <option value="Uxbridge">Uxbridge</option>
                <option value="Vauxhall">Vauxhall</option>
                <option value="Victoria">Victoria</option>
                <option value="Wallington">Wallington</option>
                <option value="Waltham Forest">Waltham Forest</option>
                <option value="Walthamstow">Walthamstow</option>
                <option value="Walworth">Walworth</option>
                <option value="Wandsworth">Wandsworth</option>
                <option value="Wanstead">Wanstead</option>
                <option value="Wapping">Wapping</option>
                <option value="Waterloo">Waterloo</option>
                <option value="Watford">Watford</option>
                <option value="Wealdstone">Wealdstone</option>
                <option value="Welling">Welling</option>
                <option value="Wembley">Wembley</option>
                <option value="West Brompton">West Brompton</option>
                <option value="West Byfleet">West Byfleet</option>
                <option value="West Chelsea">West Chelsea</option>
                <option value="West Drayton">West Drayton</option>
                <option value="West End">West End</option>
                <option value="West Ham">West Ham</option>
                <option value="West Hampstead">West Hampstead</option>
                <option value="West Kensington">West Kensington</option>
                <option value="West Norwood">West Norwood</option>
                <option value="West Smithfield">West Smithfield</option>
                <option value="West Thurrock">West Thurrock</option>
                <option value="West Tilbury">West Tilbury</option>
                <option value="West Wickham">West Wickham</option>
                <option value="Westminster">Westminster</option>
                <option value="Weybridge">Weybridge</option>
                <option value="Whetstone">Whetstone</option>
                <option value="Whitechapel">Whitechapel</option>
                <option value="Whitehall">Whitehall</option>
                <option value="Whitton">Whitton</option>
                <option value="Willesden">Willesden</option>
                <option value="Willesden Green">Willesden Green</option>
                <option value="Wimbledon">Wimbledon</option>
                <option value="Winchmore Hill">Winchmore Hill</option>
                <option value="Windsor">Windsor</option>
                <option value="Wood Green">Wood Green</option>
                <option value="Woodford Bridge">Woodford Bridge</option>
                <option value="Woodford Green">Woodford Green</option>
                <option value="Woolwich">Woolwich</option>
                <option value="Worcester Park">Worcester Park</option>
                <option value="Yeading">Yeading</option>
            <optgroup label="UK Cities">
                <option value="Basingstoke">Basingstoke</option>
                <option value="Birmingham">Birmingham</option>
                <option value="Bournemouth">Bournemouth</option>
                <option value="Bracknell">Bracknell</option>
                <option value="Brighton">Brighton</option>
                <option value="Bristol">Bristol</option>
                <option value="Cambridge">Cambridge</option>
                <option value="Cardiff">Cardiff</option>
                <option value="Coventry">Coventry</option>
                <option value="Farnborough">Farnborough</option>
                <option value="Guildford">Guildford</option>
                <option value="Leicester">Leicester</option>
                <option value="Liverpool">Liverpool</option>
                <option value="Maidenhead">Maidenhead</option>
                <option value="Maidstone">Maidstone</option>
                <option value="Manchester">Manchester</option>
                <option value="Milton Keynes">Milton Keynes</option>
                <option value="Newbury">Newbury</option>
                <option value="Northampton">Northampton</option>
                <option value="Oxford">Oxford</option>
                <option value="Plymouth">Plymouth</option>
                <option value="Reading">Reading</option>
                <option value="Slough">Slough</option>
                <option value="Swindon">Swindon</option>
                <option value="Windsor">Windsor</option>
            <optgroup label="UK Airports">
                <option value="Aberdeen (ABZ)">Aberdeen (ABZ)</option>
                <option value="Belfast (BFS)">Belfast (BFS)</option>
                <option value="Birmingham (BHX)">Birmingham (BHX)</option>
                <option value="Blackpool (BLK)">Blackpool (BLK)</option>
                <option value="Bournemouth (BOH)">Bournemouth (BOH)</option>
                <option value="Bristol (BRS)">Bristol (BRS)</option>
                <option value="Cardiff (CWL)">Cardiff (CWL)</option>
                <option value="Coventry (CVT)">Coventry (CVT)</option>
                <option value="Durham Tees(MME)">Durham Tees(MME)</option>
                <option value="East Midlands (EMA)">East Midlands (EMA)</option>
                <option value="Exeter (EXT)">Exeter (EXT)</option>
                <option value="Belfast City (BHD)">Belfast City (BHD)</option>
                <option value="Glasgow (PIK)">Glasgow (PIK)</option>
                <option value="Leeds Bradford (LBA)">Leeds Bradford (LBA)</option>
                <option value="Liverpool (LPL)">Liverpool (LPL)</option>
                <option value="London City (LCY)">London City (LCY)</option>
                <option value="London Gatwick (LGW)">London Gatwick (LGW)</option>
                <option value="London Luton (LTN)">London Luton (LTN)</option>
                <option value="London Southend (SEN)">London Southend (SEN)</option>
                <option value="London Stansted (STN)">London Stansted (STN)</option>
                <option value="Manchester (MAN)">Manchester (MAN)</option>
                <option value="Newcastle (NCL)">Newcastle (NCL)</option>
                <option value="Norwich (NWI)">Norwich (NWI)</option>
                <option value="Plymouth City (PLH)">Plymouth City (PLH)</option>
                <option value="Southampton (SOU)">Southampton (SOU)</option>
            <optgroup label="UK Seaports">
                <option value="Dover">Dover</option>
                <option value="Felixstowe">Felixstowe</option>
                <option value="Folkestone">Folkestone</option>
                <option value="Harwich">Harwich</option>
                <option value="Portsmouth">Portsmouth</option>
                <option value="Southampton">Southampton</option>
                <optgroup label="Train Stations">
                <option value="Blackfriars">Blackfriars</option>
                <option value="Cannon Street">Cannon Street</option>
                <option value="Charing Cross">Charing Cross</option>
                <option value="City Thameslink">City Thameslink</option>
                <option value="Euston">Euston</option>
                <option value="Farringdon">Farringdon</option>
                <option value="Fenchurch Street">Fenchurch Street</option>
                <option value="Kings Cross">Kings Cross</option>
                <option value="Leicester Square">Leicester Square</option>
                <option value="Liverpool Street">Liverpool Street</option>
                <option value="London Bridge">London Bridge</option>
                <option value="Marylebone">Marylebone</option>
                <option value="Moorgate">Moorgate</option>
                <option value="Oxford Circus">Oxford Circus</option>
                <option value="Paddington">Paddington</option>
                <option value="St Pancras">St Pancras</option>
                <option value="Victoria">Victoria</option>
                <option value="Waterloo">Waterloo</option>
                <option value="Waterloo East">Waterloo East</option>
        </select>	
        </div>
    </form>
    </body>
    
    </html>
    The js.js script. It might look complicated but trust me it's straightforward enough. One thing I added to it is when someone makes a final selection in the child list I am updating the invisible master select too. This is because when they post the form you will only have access to the masterlist:-

    Code:
    function initSelects() {
        var selectdiv = $("selectarea");
        var masterlist = $("master");
        var opt = null;
        var i = 0;
        if (masterlist && selectdiv) {
            var parentList = document.createElement("select");
            var childList = document.createElement("select");
            var linebr = document.createElement("br");
            var groups = $els("optgroup", masterlist);
            opt = new Option("Select Area", "0");
            parentList.options[parentList.options.length] = opt;
            for (i = 0; groups[i]; i++) {
                var groupname = groups[i].label;
                opt = new Option(groupname, groupname);
                parentList.options[parentList.options.length] = opt;
            }
    
            parentList.onchange = parentListChanged;
            parentList.childSelect = childList;
            selectdiv.appendChild(parentList);
            selectdiv.appendChild(linebr);
            childList.className = "clearboth";
            childList.onchange = childListChanged;
            selectdiv.appendChild(childList);        
            //masterlist.className = "invisible";
        }
    }
    function parentListChanged() {
        var masterlist = $("master");
        var childList = this.childSelect;
        var i = 0;
        var j = 0;
        childList.options.length = 0;
        opt = new Option("Select Postcode", "0");
        childList.options[childList.options.length] = opt;
        if (this.selectedIndex > 0) {
            //find the optgroup with this label
            var groups = $els("optgroup", masterlist);
            for (i = 0; groups[i]; i++) {
                var groupname = groups[i].label;
                if (groupname === this.options[this.selectedIndex].value) {
                    masterlist.selectIndex = i;
                    var groupitems = $els("option", groups[i]);
                    for (j = 0; groupitems[j]; j++) {
                        var groupitem = groupitems[j];
                        var opt = new Option(groupitem.text, groupitem.value);
                        childList.options[childList.options.length] = opt;
                    }
                }
            }
        }
    }
    function childListChanged() {
        var masterlist = $("master");
        masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
    }
    addLoadEvent(initSelects);
    //adds an event to be run when the page has loaded
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }
    //utility function to get an element by id
    function $(elementID) {
        return document.getElementById(elementID);
    }
    //utility function to get elements by tagname within the document or an element
    function $els(tagName, parentElement) {
        if (parentElement) {
            return parentElement.getElementsByTagName(tagName);
        } else {
            return document.getElementsByTagName(tagName);
        }
    }
    function findByValue(obj, value)   {
        //this function takes a select element and a text value to
        //find the index of the option with the same value
        var idx = -1;
        var i = 0;
        for (i=0;i<obj.options.length;i++)  {
            if (obj.options[i].value == value)  {
                idx = i;
                break;
            }
        }
        return idx;
    }
    Finally the css:-

    Code:
    .invisible  {
        position:absolute;
        top:-999em;
        left:-999em;
    }
    The .invisible positions the masterselect offscreen so screen readers would still see it but you could use display:none if that is not a concern.

  9. #9
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, i have created the page you gave me, added the css and the javascript.. what i am presented with is a single drop down (master) on the page...

    i have looked at the javascript..

    what names should i give to the parent and child drop downs..?

    does the above javascript..

    hide the master drop down upon page load?

    load all groups titles from master in the parent drop down?

    update the child drop down with the values from the chosen master group?

    thanks.

  10. #10
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the required id values are in the html I posted. The css file and the js.js file should both be in a scripts folder. I put them in that folder because your css was in a folder called scripts. The parent and child selected are added dynamically by the javascript and do not begin in the html. They don't require id values as I am updating the master select at the same time it will contain the selected code when the user submits the page.

    hide the master drop down upon page load?

    The javascript sets the classname of the masterselect to "invisible". In the css file I have declared a class .invisible. This should make it essentially invisible but in reality is just placed offscreen so screen readers will still see it. If this is not required the .invisible class in the css could be changed to include display:none;

    load all groups titles from master in the parent drop down?

    Have a look at the script. The initSelects function contains the code that is run when the page loads. It loops through the optgroups in the master and uses the label values of these to populate the parent.

    update the child drop down with the values from the chosen master group

    Yes it does. Again look at the script. Events are assigned to elements in external script like this - element.onchange = functionname;
    You can find more about this by googling 'unobtrusive javascript'.

  11. #11
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, upon closer inspection everything works fine..

    a couple of things, the actual master drop down is still appearing when the page loads..

    also when an actual place is selected in the second drop down i would need the form to submited 'on change', can this be incorporated into the javascript?

    i am going to put what you gave me into my website design and see how it looks..

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another issue.. because the drop downs are not actually coded on the html.. how can i add my css style to them? would that also need to be done in the javascript?

  13. #13
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry look for this //masterlist.className = "invisible"; in the code. I hadd commented it out so just remove the slashes and the master select should dissappear when the page loads..

    In the function initSelects you can set class values for the 2 drop downs. There is a line already there for the child list but it's not relevent as I was going to make it display block but changed my mind so this line:-

    childList.className = "clearboth";

    can be changed to any class you want and you can add in a line for the parent:-

    parentList.className = "myclass";

    Then in the css just create class values:-

    .myclass {
    font-size:90%;
    }

    and so on.

  14. #14
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To submit the form give the form an id, <form id="form1"... when a selection has been made on the childlist then you can update the event function:-

    Code:
    function childListChanged() {
        if (this.selectedIndex > 0) {
            var masterlist = $("master");
            masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
            $("form1").submit();
        }
    }

  15. #15
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, this is great.. thanks for the continued support..

    in between the drop downs i need to place text..

    for example, above the first drop down it has to have the following:

    Code:
    <p class="quote_text">1. Choose a <b>category</b>:</p>
    and above the second drop down i need to have

    Code:
    <p class="quote_text">2. Choose a <b>location</b>:</p>
    i am not completely useless with javascript but cant for the life of me see where i can place this text

  16. #16
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok.. if you take a look at the following:

    http://www.londonheathrowcars.com/gg/index.asp

    there are a few problems..

    as soon as the page loads you can see the master drop down not hidden..

    after a few seconds it dissappears.. i do not want this drop down visible at all.

    also the page seems to be taking longer to load than usual..

    i'm not quite sure why this is happening..

    the page code can be seen at the url.. here is the javascript.. can you see why this is happening?

    Code:
    function initSelects() {
        var selectdiv = $("selectarea");
        var masterlist = $("master");
        var opt = null;
        var i = 0;
        if (masterlist && selectdiv) {
            var parentList = document.createElement("select");
            var childList = document.createElement("select");
            var linebr = document.createElement("br");
            var groups = $els("optgroup", masterlist);
            opt = new Option("Select Area", "0");
            parentList.options[parentList.options.length] = opt;
            for (i = 0; groups[i]; i++) {
                var groupname = groups[i].label;
                opt = new Option(groupname, groupname);
                parentList.options[parentList.options.length] = opt;
            }
    
            parentList.onchange = parentListChanged;
            parentList.childSelect = childList;
            selectdiv.appendChild(parentList);
            selectdiv.appendChild(linebr);
            childList.className = "quote_dropdown";
    		parentList.className = "quote_dropdown";
            childList.onchange = childListChanged;
            selectdiv.appendChild(childList);        
            masterlist.className = "invisible";
        }
    }
    function parentListChanged() {
        var masterlist = $("master");
        var childList = this.childSelect;
        var i = 0;
        var j = 0;
        childList.options.length = 0;
        opt = new Option("...", "0");
        childList.options[childList.options.length] = opt;
        if (this.selectedIndex > 0) {
            //find the optgroup with this label
            var groups = $els("optgroup", masterlist);
            for (i = 0; groups[i]; i++) {
                var groupname = groups[i].label;
                if (groupname === this.options[this.selectedIndex].value) {
                    masterlist.selectIndex = i;
                    var groupitems = $els("option", groups[i]);
                    for (j = 0; groupitems[j]; j++) {
                        var groupitem = groupitems[j];
                        var opt = new Option(groupitem.text, groupitem.value);
                        childList.options[childList.options.length] = opt;
                    }
                }
            }
        }
    }
    function childListChanged() {
        var masterlist = $("master");
        masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
    }
    addLoadEvent(initSelects);
    //adds an event to be run when the page has loaded
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }
    //utility function to get an element by id
    function $(elementID) {
        return document.getElementById(elementID);
    }
    //utility function to get elements by tagname within the document or an element
    function $els(tagName, parentElement) {
        if (parentElement) {
            return parentElement.getElementsByTagName(tagName);
        } else {
            return document.getElementsByTagName(tagName);
        }
    }
    function findByValue(obj, value)   {
        //this function takes a select element and a text value to
        //find the index of the option with the same value
        var idx = -1;
        var i = 0;
        for (i=0;i<obj.options.length;i++)  {
            if (obj.options[i].value == value)  {
                idx = i;
                break;
            }
        }
        return idx;
    }
    
    function childListChanged() {
        if (this.selectedIndex > 0) {
            var masterlist = $("master");
            masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
            $("form1").submit();
        }
    }

  17. #17
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll just take this out of code tags so you can see the changes:-


    var parentHeader = document.createElement("p");
    var parentList = document.createElement("select");
    var childHeader = document.createElement("p");
    var childList = document.createElement("select");
    var linebr = document.createElement("br");
    var groups = $els("optgroup", masterlist);
    opt = new Option("Select Area", "0");
    parentList.options[parentList.options.length] = opt;
    for (i = 0; groups[i]; i++) {
    var groupname = groups[i].label;
    opt = new Option(groupname, groupname);
    parentList.options[parentList.options.length] = opt;
    }

    parentList.onchange = parentListChanged;
    parentList.childSelect = childList;
    parentHeader.className = "quote_text";
    parentHeader.innerHTML = "1. Choose a category:";
    selectdiv.appendChild(parentHeader);

    selectdiv.appendChild(parentList);
    childHeader.className = "quote_text";
    childHeader.className = ""2. Choose a location:";

    // - line break not required if we insert a p tag
    //selectdiv.appendChild(linebr);
    selectdiv.appendChild(childHeader);
    childList.onchange = childListChanged;
    selectdiv.appendChild(childList);
    //masterlist.className = "invisible";

    I've left the b tags out of your text because any tag you want to add using DOM manipulation needs a seperate createElement line if you know what I mean.

  18. #18
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also the form doesnt submit in FF but does in IE

  19. #19
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok.. more problems.. here is what the page looks like (press ctrl and f5)

    http://www.londonheathrowcars.com/gg/index.asp

    here is the javascript i am using..

    Code:
    function initSelects() {
        var selectdiv = $("selectarea");
        var masterlist = $("master");
        var opt = null;
        var i = 0;
        if (masterlist && selectdiv) {
    var parentHeader = document.createElement("p");
    var parentList = document.createElement("select");
    var childHeader = document.createElement("p");
    var childList = document.createElement("select");
    var linebr = document.createElement("br");
    var groups = $els("optgroup", masterlist);
    opt = new Option("Select Area", "0");
    parentList.options[parentList.options.length] = opt;
    for (i = 0; groups[i]; i++) {
    var groupname = groups[i].label;
    opt = new Option(groupname, groupname);
    parentList.options[parentList.options.length] = opt;
    }
    
    parentList.onchange = parentListChanged;
    parentList.childSelect = childList;
    parentHeader.className = "quote_text";
    parentHeader.innerHTML = "1. Choose a category:";
    selectdiv.appendChild(parentHeader);
    selectdiv.appendChild(parentList);
    childHeader.className = "quote_text";
    childHeader.className = ""2. Choose a location:";
    // - line break not required if we insert a p tag
    //selectdiv.appendChild(linebr);
    selectdiv.appendChild(childHeader);
    childList.onchange = childListChanged;
    selectdiv.appendChild(childList);
    masterlist.className = "invisible";
        }
    }
    function parentListChanged() {
        var masterlist = $("master");
        var childList = this.childSelect;
        var i = 0;
        var j = 0;
        childList.options.length = 0;
        opt = new Option("...", "0");
        childList.options[childList.options.length] = opt;
        if (this.selectedIndex > 0) {
            //find the optgroup with this label
            var groups = $els("optgroup", masterlist);
            for (i = 0; groups[i]; i++) {
                var groupname = groups[i].label;
                if (groupname === this.options[this.selectedIndex].value) {
                    masterlist.selectIndex = i;
                    var groupitems = $els("option", groups[i]);
                    for (j = 0; groupitems[j]; j++) {
                        var groupitem = groupitems[j];
                        var opt = new Option(groupitem.text, groupitem.value);
                        childList.options[childList.options.length] = opt;
                    }
                }
            }
        }
    }
    function childListChanged() {
        var masterlist = $("master");
        masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
    }
    addLoadEvent(initSelects);
    //adds an event to be run when the page has loaded
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }
    //utility function to get an element by id
    function $(elementID) {
        return document.getElementById(elementID);
    }
    //utility function to get elements by tagname within the document or an element
    function $els(tagName, parentElement) {
        if (parentElement) {
            return parentElement.getElementsByTagName(tagName);
        } else {
            return document.getElementsByTagName(tagName);
        }
    }
    function findByValue(obj, value)   {
        //this function takes a select element and a text value to
        //find the index of the option with the same value
        var idx = -1;
        var i = 0;
        for (i=0;i<obj.options.length;i++)  {
            if (obj.options[i].value == value)  {
                idx = i;
                break;
            }
        }
        return idx;
    }
    
    function childListChanged() {
        if (this.selectedIndex > 0) {
            var masterlist = $("master");
            masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
            $("form1").submit();
        }
    }

  20. #20
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to load quickly for me but if it is slow it's a draw back of the long list of items we have. The masterselect can be invisible right from the start by adding class="invisible" to it in the html.

    The most user friendly way to do this imo would be to have some text in the div saying something like "loading options..."

    <div id="selectarea">
    <div id="loadingmessage">loading options...</div>
    <select id="masterselect" class="invisible"></select>
    </div>

    then when the function initSelects() runs you can remove it:-

    ...
    selectdiv.appendChild(childHeader);
    childList.onchange = childListChanged;
    selectdiv.appendChild(childList);
    //masterlist.className = "invisible";
    $("loadingmessage").className = "invisible";

  21. #21
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all make your form has an id -id="form1". We are not interested in name attributes when we work with the DOM, always id attributes.
    Also make sure the action of the form is pointing to the page you want it to point to or you'll get a page not found error.

  22. #22
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also in your script you have:-

    childHeader.className = ""2. Choose a location:";

    The two double quote are causing the error and you want that to be innerHTML not className:-

    childHeader.innerHTML = "2. Choose a location:";

  23. #23
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok..

    nearly there.. firstly the 2. Choose a location is not displaying.

    also the gap between the date and time and the form is too big.. i cant see any line break above the form.. can you see what is causing that gap?

    Code:
    function initSelects() {
        var selectdiv = $("selectarea");
        var masterlist = $("master");
        var opt = null;
        var i = 0;
        if (masterlist && selectdiv) {
    var parentHeader = document.createElement("p");
    var parentList = document.createElement("select");
    var childHeader = document.createElement("p");
    var childList = document.createElement("select");
    var linebr = document.createElement("br");
    var groups = $els("optgroup", masterlist);
    opt = new Option("Select Area", "0");
    parentList.options[parentList.options.length] = opt;
    for (i = 0; groups[i]; i++) {
    var groupname = groups[i].label;
    opt = new Option(groupname, groupname);
    parentList.options[parentList.options.length] = opt;
    }
    
    parentList.onchange = parentListChanged;
    parentList.childSelect = childList;
    parentList.className = "quote_dropdown";
    parentHeader.className = "quote_text";
    parentHeader.innerHTML = "1. Choose a category:";
    selectdiv.appendChild(parentHeader);
    selectdiv.appendChild(parentList);
    childHeader.className = "quote_text";
    childHeader.className = "2. Choose a location:";
    // - line break not required if we insert a p tag
    //selectdiv.appendChild(linebr);
    selectdiv.appendChild(childHeader);
    childList.className = "quote_dropdown";
    childList.onchange = childListChanged;
    selectdiv.appendChild(childList);
    masterlist.className = "invisible";
        }
    }
    function parentListChanged() {
        var masterlist = $("master");
        var childList = this.childSelect;
        var i = 0;
        var j = 0;
        childList.options.length = 0;
        opt = new Option("...", "0");
        childList.options[childList.options.length] = opt;
        if (this.selectedIndex > 0) {
            //find the optgroup with this label
            var groups = $els("optgroup", masterlist);
            for (i = 0; groups[i]; i++) {
                var groupname = groups[i].label;
                if (groupname === this.options[this.selectedIndex].value) {
                    masterlist.selectIndex = i;
                    var groupitems = $els("option", groups[i]);
                    for (j = 0; groupitems[j]; j++) {
                        var groupitem = groupitems[j];
                        var opt = new Option(groupitem.text, groupitem.value);
                        childList.options[childList.options.length] = opt;
                    }
                }
            }
        }
    }
    function childListChanged() {
        var masterlist = $("master");
        masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
    }
    addLoadEvent(initSelects);
    //adds an event to be run when the page has loaded
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }
    //utility function to get an element by id
    function $(elementID) {
        return document.getElementById(elementID);
    }
    //utility function to get elements by tagname within the document or an element
    function $els(tagName, parentElement) {
        if (parentElement) {
            return parentElement.getElementsByTagName(tagName);
        } else {
            return document.getElementsByTagName(tagName);
        }
    }
    function findByValue(obj, value)   {
        //this function takes a select element and a text value to
        //find the index of the option with the same value
        var idx = -1;
        var i = 0;
        for (i=0;i<obj.options.length;i++)  {
            if (obj.options[i].value == value)  {
                idx = i;
                break;
            }
        }
        return idx;
    }
    
    function childListChanged() {
        if (this.selectedIndex > 0) {
            var masterlist = $("master");
            masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
            $("form1").submit();
        }
    }

  24. #24
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hang on..

  25. #25
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is just the gap now at the top of the form... is there a line break there?

    should i add a padding, margin 0 to the form?


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
  •