Question

第二个Select元素无法动态显示国家/地区，我已完全按照教程进行操作，但想知道为什么它根本不起作用？

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

虽然本教程有效。

<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]=["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>

Answer 1

在元素存在之前声明了

var citieslist=document.classic.subj2，而且更好地执行以下操作。

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

确保在所需的HTML元素可用后脚本运行。一种简单（也是最佳）的方法是在</body>标记之前包含文档底部的所有JavaScript。

Answer 2

这是修改后的版本。请注意，我不需要在脚本运行之前保存选择

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

无法在select元素中显示值

2 个答案: