怎么用jquery实现省市区联动

用jquery实现省市区联动的方法：1、创建一个HTML示例文件；2、在js文件中通过“$(function() { for(VAR i = 0; i PRvo.length; i++) { ...} } ”方法实现省市区联动即可。

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

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

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

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

HTML页面

!DOCTYPE html>
    html>
    	head>
    		meta charset="utf-8" />
    		tITle>
    省市区联动菜单/title>
    	/head>
    		body>
    		!--选择省-->
    		select id="prvoince">
    			option>
    --请选择省份--/option>
    		/select>
    		!--选择市-->
    		select id="city">
    			option>
    --请选择城市--/option>
    		/select>
    				select id="district">
    			option>
    --请选择区--/option>
    		/select>
    				script src="jquery.js" type="text/javascript">
    					/script>
    		script type="text/javascript" src="js/jq.js">
    		/script>
    	/body>
    /html>
    

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.length;
 i++) {
    		//每次循环加一个option标签		$("#prvoince").append("option>
    " + prvo[i] + "/option>
")	}
	//---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.length;
 i++) {
    			$("#city").append("option>
    " + citys[i] + "/option>
")			//[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.length;
 i++) {
    			$("#district").append("option>
    " + distr[i]+ "/option>
")		}
	}
)}
    )

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

以上就是怎么用jquery实现省市区联动的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！