关于表单联动联系中遇到的问题
• 学校：选北京出现北大清华。 选武汉 出现武大华科
• 问题1:现在我选的武汉。大家看我54行控制台上的信息。 前一个都是对的 为什么后一个就不对了（前一个是武汉 赋值给后一个，后一个变成北京了！）
• 问题2:大家看我44行。如果我用location代替loc 为什么网页404
• 问题3:我这个做法是表单联动的常见做法吗
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task3-3</title>
<style type="text/css">
* {
font-size: 12px;
padding: 0;
margin: 0;
}
form {width: 400px;
height: 200px;
margin: 100px auto;
border: 1px solid black;}
form p{margin: 20px auto;width: 200px;}
form p input{margin-right: 5px;margin-left: 30px;}
form span{margin:20px 10px 20px 50px;display: inline-block;}
</style>
</head>
<body>
<form>
<p><input type="radio" name="stdornot" value="在校生" id="std">在校生
<input type="radio" name="stdornot" value="非在校生" id="no_std">非在校生<br></p>
<div id="ls" style="display: none;" ><span>学校</span>
<select style="width: 100px" id="loc">
<option >北京</option>
<option >武汉</option>
</select >
<select style="width: 150px" id="school">
</select></div>
<div id="workplace" style="display: none;"><span>就业单位</span>
<input id="firm" type="text" style="width: 200px;height: 20px">
</input></div>
</form>
<script type="text/javascript">
var std=document.getElementById("std");
var no_std=document.getElementById("no_std");
var ls=document.getElementById("ls");
var workplace=document.getElementById("workplace");
var loc = document.getElementById("loc");
var school = document.getElementById("school");
std.onclick=function () {
ls.style.display='block';
workplace.style.display='none';
};
no_std.onclick=function () {
ls.style.display='none';
workplace.style.display='block';
};
var selectOption = loc.options[loc.selectedIndex];
if(selectOption.text=="北京"){
clearSelectbox(school);
var beida=new Option("北京大学","北京大学");
school.add(beida,undefined);
var qinghua=new Option("清华大学","清华大学");
school.add(qinghua,undefined);
}
if(selectOption.text=="武汉"){
clearSelectbox(school);
var wuda=new Option("武汉大学","武汉大学");
school.add(wuda,undefined);
var huake=new Option("华中科技大学","华中科技大学");
school.add(huake,undefined);
}
function clearSelectbox(selectbox) {
for(var i=0,len=selectbox.options.length;i<len;i++){
selectbox.remove(0);
}
}
</script>
</body>
</html>
问题1
你变量存储的就初始化时的option，并不是选中后的，loc.options[loc.selectedIndex]这样是重新获取最新的选中option了
问题2:大家看我44行。如果我用location代替loc 为什么网页404
location是window的导航对象，不能定义这个对象，你赋值了要转向到你赋值的那个地址了，由于是dom对象，会调用默认的toString方法得到字符串（[object HTMLSelectElement]），然后转向到那个url地址肯定报错了
• 问题3
你并没有联动起来，应该给loc添加onchange来更改另外一个select的option，联动可以参考这种，包括数据结构：javascript省市县三级联动示例
var std=document.getElementById("std");
var no_std=document.getElementById("no_std");
var ls=document.getElementById("ls");
var workplace=document.getElementById("workplace");
var loc = document.getElementById("loc");
var school = document.getElementById("school");
std.onclick=function () {
ls.style.display='block';
workplace.style.display='none';
};
no_std.onclick=function () {
ls.style.display='none';
workplace.style.display='block';
};
loc.onchange=loadSchool
function loadSchool() {
var selectOption = loc.options[loc.selectedIndex];
if (selectOption.text == "北京") {
clearSelectbox(school);
var beida = new Option("北京大学", "北京大学");
school.add(beida, undefined);
var qinghua = new Option("清华大学", "清华大学");
school.add(qinghua, undefined);
}
if (selectOption.text == "武汉") {
clearSelectbox(school);
var wuda = new Option("武汉大学", "武汉大学");
school.add(wuda, undefined);
var huake = new Option("华中科技大学", "华中科技大学");
school.add(huake, undefined);
}
}
loadSchool()
function clearSelectbox(selectbox) {
for(var i=0,len=selectbox.options.length;i<len;i++){
selectbox.remove(0);
}
}
我觉得你更换地区时，
应该把school清空，
再重新加载学校。
给你个三级联动：http://blog.csdn.net/xuanzhangran/article/details/55051237