二级联动下拉框
<!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//这样返回的是那个标签所选中的信息。这样也可以实现二级联动
原文:https://www.cnblogs.com/ares-python/p/11908551.html