小菜鸟 烦请老师指点下
来源：7-6 编程练习
编程从入门到自闭
2020-08-08 00:54:56
老师要想实现第一个下拉框内容确定时 第二个下拉框也只展示特定内容. 我的思路是当第一个选中时 先将将第二个下拉框长度置为0 然后在调用函数新增内容 html 和js代码如下 请老师指点 是否还有别的简单的思路
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="address()">
<form>
省份：
<select name="pro" id="pro" onchange="change()">
</select>
市/区：
<select name="city" id="city">
</select>
</form>
</body>
</html>
js 代码如下
function address(){
var pro=document.getElementById("pro");
var city=document.getElementById("city");
selectAdd(pro,"北京市",1);
selectAdd(pro,"天津市",2);
selectAdd(pro,"河北省",3);
selectAdd(pro,"河南省",4);
selectAdd(city,"朝阳区",1);
selectAdd(city,"西城区",2);
selectAdd(city,"石家庄",3);
selectAdd(city,"邯郸市",4);
selectAdd(city,"西青区",5);
selectAdd(city,"武清区",6);
selectAdd(city,"郑州市",7);
selectAdd(city,"开封市",8);
}
function change(){
var pro=document.getElementById("pro");
var city=document.getElementById("city");
var v1=pro.value;
var v2=city.value;
if(v1==1){
city.length=0;
selectAdd(city,"朝阳区",1);
selectAdd(city,"西城区",2);
}
else if(v1==2){
city.length=0;
selectAdd(city,"西青区",3);
selectAdd(city,"武清区",4);
}
else if(v1==3){
city.length=0;
selectAdd(city,"石家庄",5);
selectAdd(city,"邯郸市",6);
}
else{
selectAdd(city,"郑州市",7);
selectAdd(city,"开封市",8);
}
}
2回答
-
好帮手慕阿园
2020-08-08
同学你好，添加后是可以实现的，同学在这一小节完成了下一小节的练习作业，很棒呐
但是还有个小建议，在一级菜单为北京市时,再点击北京市,显示不出来内容,因为onchange事件表示内容发生改变的时候会触发该事件，所以直到点击一次别的省才会调用到change()方法
可以在onload事件中添加change()方法, 当加载页面完就加载change()方法。保证页面加载完就可以获取到省份的值，来进行二级联动的判断
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0 -
编程从入门到自闭
提问者
2020-08-08
老师昨晚提问js 里面少传了一个 selectAdd 方法 您加进去试下 展示结果应该没问题
function selectAdd(obj,name,value){
obj.add(new Option(name,value));
}
0
相似问题