Javascript 无法在选择元素中显示值_Javascript

Javascript 无法在选择元素中显示值

javascript

Javascript 无法在选择元素中显示值,javascript,Javascript,第二个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> <l

第二个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>

var citieslist=document.classic.subj2在元素存在之前声明，改为执行以下操作也更好

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

并确保脚本在所需的HTML元素可用后运行。一种简单且最好的方法是在标记之前将所有javascript包含在文档底部。请注意，在脚本运行之前，我不需要保存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" />
<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>

请编辑您的问题并仅放置必要的位置。如果你粘贴你的整个HTML文档，这并不是很有帮助？可能从1999年开始？这里有很多错误。但是，教程工作，我的代码不工作？奇怪的我已经剪切粘贴了整整10次。这比Actionscript更难。本教程的脚本位于目标HTML下方，而您的脚本位于HTML之前。在创建对HTML的引用时，HTML必须在脚本之前。这是订购的问题。天哪！它起作用了！我记得三年前有人也有同样的问题。直到今天，订单还是毫无意义。呵呵，不用把代码放在任何地方，只要放在头上就行了。看我的suggestion@MPlungjan是的，更好的代码，但将脚本放在底部是很好的。如果没有脚本，HTML将呈现得更快，因为它不必等待脚本完成，也不需要domReady实现等等。这只是一个很好的练习；