Cannot display value in select element_问答_开发者

The second Select element cannot display the countries dynamically, I have follow the tutorial exactly but wonder why it simply won't work?

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

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<script type="text/javascript">
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>0){
        for (i=0; i<cities[selectedcitygroup].length; i++)
        citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
    }
}
</script>
<div id="template">
    <div id="links">
        <li><a href=".">Home</a></li>
        <li><a href=".">Contact Us</a></li>
        <li><a href=".">Request</a></li>
        <li><a href=".">Cloud</a></li>
        <li><a href=".">Pricing</a></li>
    </div>
    <img id="tta" src="tta/tta.png"></img>
    <div id="picture"></div>
    <div id="search">
    <img id="tta" src="tta/search.jpg"></img>
    <form name="classic">
    <p>LEVEL</p>
    <select onChange="updateSubj(this.selectedIndex)">
        <option>Select A City</option>
        <option>USA</option>
        <option>Canada</option>
        <option>United Kingdom</option>
    </select>
    <p>SUBJECT</p>
    <select name="subj2"></select>
    <p>TYPE</p>
    <select name="sasd"></select>
    </form>
    </div>
    <div id="gradient_bg"></div>
    <?php
    echo "ssssss";
    ?>
</div>
</body>
</html>

While this tutorial work.

<form name="classic">
 <select onChange="updateSubj(this.selectedIndex)">
     <option>Select A City</option>
     <option>USA</option>
 </select>

 <select name="subj"></select>
 </form>

 <script type="text/javascript">

 var clist=document.classic.subj

 var cities2=new Array()
 cities2[0]=""
 cities2[1]=开发者_JAVA技巧["New York|newyorkvalue"]
 cities2[2]=["Vancouver|vancouvervalue"]


 function updateSubj(ssg){
    clist.options.length=0
    if (ssg>0){

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

 </script>

var citieslist=document.classic.subj2 is declared before the element exists, it's also a lot better to do the following instead.

var citiesList = document.getElementById( "subj2" );

And make sure that the script runs once your needed HTML elements are available. An easy (and just best) way to do this is to include all javascript at the bottom of your document before the </body> tag.

Here is a modified version. Note that I do not need to save the select before the script runs

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

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript">
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(countrySel){
  var selectedcitygroup = countrySel.selectedIndex;
  var citieslist = countrySel.form.citieslist;
  citieslist.options.length=0;
  if (selectedcitygroup>0){
    for (var i=0; i<cities[selectedcitygroup].length; i++) {
      var parts = cities[selectedcitygroup][i].split("|");
      citieslist.options[citieslist.options.length]=new Option(parts[0], parts[1])
    }
  }
}
</script>

</head>
<body>
<div id="template">
    <div id="links">
        <li><a href=".">Home</a></li>
        <li><a href=".">Contact Us</a></li>
        <li><a href=".">Request</a></li>
        <li><a href=".">Cloud</a></li>
        <li><a href=".">Pricing</a></li>
    </div>
    <img id="tta" src="tta/tta.png"></img>
    <div id="picture"></div>
    <div id="search">
    <img id="tta" src="tta/search.jpg"></img>
    <form name="classic">
    <p>LEVEL</p>
    <select name="country" onChange="updateSubj(this)">
        <option>Select a country</option>
        <option>USA</option>
        <option>Canada</option>
        <option>United Kingdom</option>
    </select>
    <p>SUBJECT</p>
    <select name="citieslist"></select>
    <p>TYPE</p>
    <select name="sasd"></select>
    </form>
    </div>
    <div id="gradient_bg"></div>
    <?php
    echo "ssssss";
    ?>
</div>
</body>