用jQuery,ajax,实现三级联动封装JS的文件

Posted <一>

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用jQuery,ajax,实现三级联动封装JS的文件相关的知识,希望对你有一定的参考价值。

// javascript Document
$(document).ready(function(e) {
	//找到ID=SANJI的DIV,造三个下拉扔进去
   	var str = "<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>";
    $("#sanji").html(str);
//加载省的数据
	Hsheng();
	//加载市的数据
	Hshi();
	//加载区的数据
	Hqu();
	//给省的下拉加点击事件
	$("#sheng").click(function(){
			Hshi();//重新加载市
			Hqu();//重新加载区
		});
	$("#shi").click(function(){//给市的下拉加点击事件
			Hqu();//重新加载区
		});
});
function Hsheng(){//加载省份的方法
	var code="0001";
	$.ajax({
		url:"shicl.php",
		data:{code:code},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
			var hang = data.split("|");
			var str = "";
			for(var i=0;i<hang.length;i++)
				{
					var lie = hang[i].split("-");
					str = str +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
			$("#sheng").html(str);
			}
		});
	}
function Hshi(){//加载市的方法
	var code=$("#sheng").val();//找市的父级代号
	$.ajax({
		url:"shicl.php",
		data:{code:code},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
			var hang = data.split("|");
			var str = "";
			for(var i=0;i<hang.length;i++)
				{
					var lie = hang[i].split("-");
					str = str +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
			$("#shi").html(str);
			}
		});
	}
	function Hqu(){//加载区的方法
	var code=$("#shi").val();//找区的父级代号
	$.ajax({
		url:"shicl.php",
		data:{code:code},
		type:"POST",
		dataType:"TEXT",  
		success: function(data){
			var hang = data.split("|");
			var str = "";
			for(var i=0;i<hang.length;i++)
				{
					var lie = hang[i].split("-");
					str = str +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
			$("#qu").html(str);
			}
		});
	}

 

以上是关于用jQuery,ajax,实现三级联动封装JS的文件的主要内容,如果未能解决你的问题,请参考以下文章

ajax实现三级联动下拉菜单

用jsp实现省市区三级联动下拉

如何用jquery+ajax写省市区的三级联动?(封装和不封装两种方式)-----2017-05-14

未加星标 ajax三级联动的实现方法

城市三级联动 AJAX-原生js封装

用php+mysql+ajax+jquery做省市区三级联动