二级联动下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="privance" onchange="privances()">
</select>
<select id="city">
</select>
</body>
<script>
data={"河北省":["石家庄市","唐山市","沧州市","廊坊市","衡水市"],
"河南省":["郑州市","洛阳市","新郑市"],
"山东省":["德州市","济南市","临沂市","青岛市"]};
var ele=document.getElementById("privance");
var citys=document.getElementById("city");
//默认
var defaults=data["河北省"];
for(var i in defaults)
{
var option_default=document.createElement("option");
option_default.innerHTML=defaults[i];
citys.appendChild(option_default);
}
for(var i in data)
{
var option_choice=document.createElement("option");
option_choice.innerHTML=i;
ele.appendChild(option_choice);
}
function privances()
{ //拿到的孩子们标签中选中的标签的内容
var array=new Array();
for(var i in data)
{
array.push(i);
}
array.reverse();
provincess=array[ele.selectedIndex];
citys.innerHTML="";
var datas=data[provincess];
for(var n in datas)
{//拿到的是索引
var option_city=document.createElement("option");
option_city.innerHTML=datas[n];
citys.appendChild(option_city);
}
}
</script>
</html>
问题：
就是原本的教程里面有一个在onchange="func1(self)"
然后在函数里面：
function func1(self)
{(self.options[self.selectedIndex]).innerHTML;//这样是正确的。
}
但是在我的实践中出错了，返回的错误信息是：Uncaught TypeError: Cannot read property 'undefined' of undefined
自己修改：
ele.selectedIndex//这样返回的是那个标签所选中的信息。这样也可以实现二级联动