老师,帮忙看下这样写可以吗?有没有要改进的地方~
来源:7-8 编程练习
加油啊豪
2020-07-05 14:54:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
<script type="text/javascript" src="practice.js"></script>
</head>
<body onload="shengqu()">
<form>
省份:<select id="sheng" onchange="selectShengQu()"></select>
市/区:<select id="qu"></select>
</form>
</body>
</html>
function shengqu(){
var sheng=document.getElementById("sheng");
var qu=document.getElementById("qu");
var arraySheng=["北京市","天津市","河北省","河南省"];
var arrayQu=["朝阳区","西城区","西青区","武清区","石家庄","邯郸市","郑州市","开封市"];
initShengQu(sheng,0,arraySheng,arraySheng.length);
initShengQu(qu,0,arrayQu,arrayQu.length);
}
function initShengQu(obj,start,array,end){
for(var i=start;i<end;i++){
obj.options.add(new Option(array[i],i));
}
}
function selectShengQu(){
var sheng=document.getElementById("sheng");
var qu=document.getElementById("qu");
var arrayQu=["朝阳区","西城区","西青区","武清区","石家庄","邯郸市","郑州市","开封市"];
var n=parseInt(sheng.value);
var start,end;
switch (n) {
case 0://北京市
start=0;
end=2;
break;
case 1://天津市
start=2;
end=4;
break;
case 2://河北省
start=4;
end=6;
break;
case 3://河南省
start=6;
end=8;
break;
default:
// statements_def
break;
}
qu.options.length=0;
initShengQu(qu,start,arrayQu,end);
}
1回答
同学你好,同学的代码整体完成不错,但是还有个小建议,在一级菜单为北京市时,再点击北京市,显示不出来内容,因为onchange事件表示内容发生改变的时候会触发该事件,所以直到点击一次别的省才会调用到selectShengQu()方法
可以添加onload事件中添加selectShengQu()方法, 当加载页面完就加载selectShengQu()方法。保证页面加载完就可以获取到省份的值,来进行二级联动的判断。

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~
相似问题