<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var array = new Array();//数组
//js中的二维数组的下标可以使字符串
array['北京'] = ["朝阳区","昌平区","海淀区"];
array['山东'] = ["青岛","烟台","泰安"];
array['河南'] = ["郑州","洛阳","开封"];
//java:array[0] = {"",""};
function initProvince(){
for(var i in array){
//alert(i);
var provinceObj = document.getElementById("province");
//创建一个选项
/**
* 参数一是:展示数据
* 参数二是:value属性的值
*/
var option = new Option(i,i);//jquery
provinceObj.add(option);//把创建的option添加到下拉列表中
}
}
function changeCity(){
var provinceName = document.getElementById("province").value;//得到第一个下拉列表的值
var city = document.getElementById("city");
//清空第二个下拉列表
//方法一
//city.innerHTML = "";
//方法二
city.options.length = 1;
for(var p in array){
if(p==provinceName){
//遍历每个省份的城市
for(var c in array[p]){
//创建一个option
var option = new Option(array[p][c],array[p][c]);
//
var city = document.getElementById("city");
city.add(option);
}
}
}
}
</script>
</head>
<body onload="initProvince()">
<!--
onchange 内容发送变化触发
-->
<select id="province" onchange="changeCity()">
<option>-请选择-</option>
</select>
<select id="city">
<option value="">-请选择-</option>
</select>
</body>
</html>
javascript之二级联动
猜你喜欢
转载自blog.csdn.net/weixin_42496678/article/details/82025374
今日推荐
周排行