用jquery实现省市区联动的方法：1、创建一个HTML示例文件；2、在js文件中通过“$(function() {for(var i = 0; i

本文操作环境：windows7系统、jquery-2.1.4版、DELL G3电脑

怎么用jquery实现省市区联动？

使用jQuery实现省市区三级联动菜单

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

通过jQuery实现省市三级联动菜单,有不足得地方还望大佬多多指导

HTML页面

html>


	
		<meta><title>省市区联动菜单</title><!--选择省--><select><option>--请选择省份--</option></select><!--选择市--><select><option>--请选择城市--</option></select><select><option>--请选择区--</option></select><script>
			
		</script><script>
		</script>

js页面

var prvo = [
	"山西", "四川"];var cit = [
	["太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],
	["成都市", "绵阳市", "雅安市", "乐山市", "眉山市"]];var dis = [
	[
		["小店区", "迎泽区"],
		["吕梁1", "吕梁2"],
		["临汾1", "临汾2"],
		["运城1", "运城2"],
		["阳泉1", "阳泉2"]
	],
	[
		["成都1", "成都2"],
		["绵阳1", "绵阳2"],
		["雅安1", "雅安2"],
		["乐山1", "乐山2"],
		["眉山1", "眉山2"]
	]]$(function() {

	//初始化省份
	for(var i = 0; i " + prvo[i] + "")
	}
	//---on---在选择元素上绑定一个或多个事件的事件处理函数
	//加入change事件使在省发生改变时 发生改变
	$("#prvoince").on('change', function() {
		//清除元素,将上一次选择的内容清除掉,开始新一轮的选择
		//$('#city').empty()
		$('#city').text(' ');
		$('#district').text(' ');
		//利用选择器中的  :selected  方法匹配到所有的元素,然后再用index方法获得下标
		//得到被选中省份的下标
		var proIndex = $("#prvoince option:selected").index();
		var citys = cit[proIndex - 1]
		for(var i = 0; i " + citys[i] + "")
			//[this.value]
		}
	})
	
	$("#city").on('change',function(){
		$("#district").empty()
		var proIndex = $("#prvoince option:selected").index();
		var citIndex = $("#city option:selected").index()
		var distr = dis[proIndex - 1][citIndex]
		for (var i = 0; i " + distr[i]+ "")
		}
	})})

推荐学习：《jquery视频教程》