方法比较笨,但能实现
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>题目</title>
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”>
<script>
var data=[{name:'北京',items:[{name:'北京',items:[{name:'东城区'},{name:'西城区'}]}]},{name:'浙江',items:[{name:'杭州',items:[{name:'上城区'},{name:'桐庐县'}]},{name:'宁波',items:[{name:'象山县'}]}]}]
// 要求:实现省市区三级下拉联动
// 初始的select需要使用js通过数据构建,数据结构使用上方data变量中的结构,无需考虑页面样式,实现功能即可
// 填充代码在下方
window.onload=function createSelect(){
var str="";
str+="<select id='select1'></select>";
str+="<select id='select2'></select>";
str+="<select id='select3'></select>";
var div=document.createElement("div");
div.innerHTML=str;
document.body.appendChild(div);
selectEvent();
}
function selectEvent(){
var s1=document.getElementById("select1");
var s2=document.getElementById("select2");
var s3=document.getElementById("select3");
s1.addEventListener("change",s2change);
s2.addEventListener("change",s3change);
var str="<option>--请选择--</option>";
s1.innerHTML=str+"<option value='"+data[0].name+"'>"+data[0].name+"</option>"+"<option value='"+data[1].name+"'>"+data[1].name+"</option>";
s2.innerHTML=str;
s3.innerHTML=str;
function s2change(ev){
s3.options.length=1;
if(ev.target.value==data[0].name)
s2.innerHTML=str+"<option value='"+data[0].items[0].name+"'>"+data[0].items[0].name+"</option>";
else if(ev.target.value==data[1].name)
s2.innerHTML=str+"<option value='"+data[1].items[0].name+"'>"+data[1].items[0].name+"</option>"+"<option value='"+data[1].items[1].name+"'>"+data[1].items[1].name+"</option>";
}
function s3change(ev){
s3.options.length=1;
if(ev.target.value==data[0].items[0].name)
s3.innerHTML=str+"<option>"+data[0].items[0].items[0].name+"</option>"+"<option>"+data[0].items[0].items[1].name+"</option>";
else if(ev.target.value==data[1].items[0].name)
s3.innerHTML=str+"<option>"+data[1].items[0].items[0].name+"</option>"+"<option>"+data[1].items[0].items[1].name+"</option>";
else if(ev.target.value==data[1].items[1].name)
s3.innerHTML=str+"<option>"+data[1].items[1].items[0].name;
}
}
</script>
</head>
<body>
</body>
</html>