通过对上一篇《省市区三级联动》的学习发现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); } }) }