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

时间:2023-03-08 22:21:00
省市区三级联动(二)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);
} })
}