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

Posted 2020-09-18 <一>

// 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);
			}
		});
	}