<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
font-size: 30px;
}
select{
width: 160px;
height: 50px;
}
</style>
</head>
<body>
省<select id="s1">
<option id='opt_province'>--请选择--</option>
</select>
市<select id="s2">
<option id ='opt_city'>--请选择--</option>
</select>
</body>
<script type="text/javascript">
var sheng=["辽宁省","山东省","江苏省","测试"]
//二维数组 citys[0][0]
var citys=[
["抚顺市","大连市","沈阳市","锦州市","铁岭市"],
["枣庄市","东营市","潍坊市","济宁市","泰安市"],
["徐州市","苏州市","连云港市","盐城市","无锡市"],
["9","6","5","4","3"]
]
var s1=document.getElementById("s1")
var s2=document.getElementById("s2")
//添加省份
for(var i of sheng){
//方法一
/* //创建option标签
var option=document.createElement("option")
//将省份放入option标签中
option.innerHTML=i
将option放入s1列表中
//s1.appendChild(option) */
//方法二在原来的内容上加上option
// s1.innerHTML+="<option>"+i+"</option>"
//方法三
var opt=new Option(i)
s1.appendChild(opt)
}
//当下拉列表选项改变的时候执行
s1.onchange=function(){//onchange就是下拉列表 选项改变时执行
// 判断选择的是哪一个省份
var index=s1.selectedIndex;
//找出省份对应的城市
var city=citys[index-1]
//添加城市
s2.innerHTML="<option id ='opt_city'>--请选择--</option>"
for(var i of city){
//创建option
var opt=new Option(i)
//将option添加到s2列表中
s2.appendChild(opt)
}
}
//让第一个option请选择失效
s1.onclick=function(){
var first=s1.children[0]
first.disabled="disabled"
}
</script>
</html>
1754
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
