省市级联

根据省的切换,市也能进行及时的更新。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="sheng" onchange="getShi()"></select>
		<select id="shi"></select>
	</body>
	<script type="text/javascript">
		var arr=new Array();
		arr["山东省"]=["青岛市","济南市","烟台市","日照市","潍坊市"];
		arr["湖南省"]=["长沙市","株洲市","湘潭市","岳阳市","常德市"];
		arr["安徽省"]=["合肥市","芜湖市","安庆市","黄山市"];
		//arr.length  二维数组的长度3,个数,从1开始数
		//arr[2].length  二维数组中下标为2的一维数组的个数  4
		window.onload=function getSheng(){
			//获取省的对象
			var sheng=document.getElementById("sheng");
			for(var i in arr){
				// console.log(i);  //二维数组的下标  "山东省"  "湖南省"  "安徽省"
				var op=new Option(i,i);
				sheng.options.add(op);
			}
			getShi();
		}
		function getShi(){
			//获取省的对象,用于取value的值 
			var n=document.getElementById("sheng").value;
			//获取市的对象
			var shi=document.getElementById("shi");
			var shis=arr[n]; //把二维数组中下标是"山东省"的一维数组取到
			//每次添加option之前,要清0
			shi.options.length=0;
			for(var i in shis){
				// console.log(i); //一维数组的下标
				var op=new Option(shis[i],i);
				shi.options.add(op);
			}
		}
	</script>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的JavaScript省市级联代码的示例: ```javascript // 省份数据 var provinces = [ { name: "北京市", cities: ["北京市"] }, { name: "上海市", cities: ["上海市"] }, { name: "广东省", cities: ["广州市", "深圳市", "珠海市"] }, // 其他省份数据... ]; // 城市数据 var cities = { "北京市": ["东城区", "西城区", "朝阳区", "海淀区"], "上海市": ["黄浦区", "徐汇区", "静安区", "普陀区"], "广州市": ["天河区", "越秀区", "海珠区", "荔湾区"], "深圳市": ["福田区", "罗湖区", "南山区", "宝安区"], "珠海市": ["香洲区", "斗门区", "金湾区"], // 其他城市数据... }; // 省份下拉框 var provinceSelect = document.getElementById("province"); // 城市下拉框 var citySelect = document.getElementById("city"); // 初始化省份下拉框 for (var i = 0; i < provinces.length; i++) { var option = document.createElement("option"); option.text = provinces[i].name; provinceSelect.add(option); } // 省份下拉框改变事件 provinceSelect.addEventListener("change", function() { // 清空城市下拉框 citySelect.innerHTML = ""; // 获取选中的省份 var selectedProvince = provinceSelect.value; // 根据选中的省份获取对应的城市数据 var selectedCities = cities[selectedProvince]; // 初始化城市下拉框 for (var i = 0; i < selectedCities.length; i++) { var option = document.createElement("option"); option.text = selectedCities[i]; citySelect.add(option); } }); ``` 这段代码实现了一个简单的省市级联功能。当选择省份时,城市下拉框会根据选中的省份动态更新显示对应的城市列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值