Cannot display value in select element
<p>The second Select element cannot display the countries dynamically, I have follow the tutorial exactly but wonder why it simply won't work?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="default.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
var citieslist=document.classic.subj2

var cities=new Array()
cities[0]=""
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]

function updateSubj(selectedcitygroup){
    citieslist.options.length=0
    if (selectedcitygroup&gt;0){
        for (i=0; i&lt;cities[selectedcitygroup].length; i++)
        citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
    }
}
&lt;/script&gt;
&lt;div id="template"&gt;
    &lt;div id="links"&gt;
        &lt;li&gt;&lt;a href="."&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="."&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="."&gt;Request&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="."&gt;Cloud&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="."&gt;Pricing&lt;/a&gt;&lt;/li&gt;
    &lt;/div&gt;
    &lt;img id="tta" src="tta/tta.png"&gt;&lt;/img&gt;
    &lt;div id="picture"&gt;&lt;/div&gt;
    &lt;div id="search"&gt;
    &lt;img id="tta" src="tta/search.jpg"&gt;&lt;/img&gt;
    &lt;form name="classic"&gt;
    &lt;p&gt;LEVEL&lt;/p&gt;
    &lt;select onChange="updateSubj(this.selectedIndex)"&gt;
        &lt;option&gt;Select A City&lt;/option&gt;
        &lt;option&gt;USA&lt;/option&gt;
        &lt;option&gt;Canada&lt;/option&gt;
        &lt;option&gt;United Kingdom&lt;/option&gt;
    &lt;/select&gt;
    &lt;p&gt;SUBJECT&lt;/p&gt;
    &lt;select name="subj2"&gt;&lt;/select&gt;
    &lt;p&gt;TYPE&lt;/p&gt;
    &lt;select name="sasd"&gt;&lt;/select&gt;
    &lt;/form&gt;
    &lt;/div&gt;
    &lt;div id="gradient_bg"&gt;&lt;/div&gt;
    &lt;?php
    echo "ssssss";
    ?&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>While this tutorial work.</p>

<pre><code>&lt;form name="classic"&gt;
 &lt;select onChange="updateSubj(this.selectedIndex)"&gt;
     &lt;option&gt;Select A City&lt;/option&gt;
     &lt;option&gt;USA&lt;/option&gt;
 &lt;/select&gt;

 &lt;select name="subj"&gt;&lt;/select&gt;
 &lt;/form&gt;

 &lt;script type="text/javascript"&gt;

 var clist=document.classic.subj

 var cities2=new Array()
 cities2[0]=""
 cities2[1]=["New York|newyorkvalue"]
 cities2[2]=["Vancouver|vancouvervalue"]


 function updateSubj(ssg){
    clist.options.length=0
    if (ssg&gt;0){

        for (i=0; i&lt;cities2[ssg].length; i++)
            clist.options[clist.options.length]=new Option(cities2[ssg][i].split("|")[0], cities2[ssg][i].split("|")[1])
        }
 }

 &lt;/script&gt;
</code></pre>
