省市区三级联动JS部分简单版

Posted 坏小子之涛声依旧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市区三级联动JS部分简单版相关的知识,希望对你有一定的参考价值。

通过对上一篇《省市区三级联动》的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数。

注意:html部分和chuli.php部分不变

 

1.下拉列表填充可以写成带参数的函数

$("#sjld").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");
    
	//1.填充省市区
	fill("0001",$("#sheng"));
	fill($("#sheng"),$("#shi"));
	fill($("#shi"),$("#qu"));

  

2.省或区发生改变,市和区的填充也写成带参数的函数

//2.改变省选择,相应的要重新填充市、区选择
	$("#sheng").change(function(){
		
		fill($("#sheng"),$("#shi"));
		fill($("#shi"),$("#qu"));
		
		})
		
		
    //3.改变市选择,相应的要重新填充区选择
	$("#shi").change(function(){
		
		fill($("#shi"),$("#qu"));
		
		})

  

3.填充省市区的函数方法可以写成fill(p,z)函数

function fill(p,z)
	{
		//获取父级代号
		if(p=="0001")
		{
			var pcode=p;
		}
		else
		{
			var pcode=p.val();
		}	
		//调用ajax方法
		$.ajax({
			
			async:false,
			url:"chulisjld.php",
			data:{pcode:pcode},
			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+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				z.html(str);
				}
			
			})
	}

  

以上是关于省市区三级联动JS部分简单版的主要内容,如果未能解决你的问题,请参考以下文章

JS(JQuery) 省市区三级联动下拉选择

JS(JQuery) 省市区三级联动下拉选择

js三级联动

jQuery简单的省市区县三级联动案例

关于小程序中省市区的三级联动

js实现省市区三级联动