Ajax 三 级 联 动:
主要实现在下拉列表里中地区的选择
JS代码:
// JavaScript Document$(document).ready(function(e) { $("#sj").html(""); //制作三个下拉列表 //填充内容 //1.省 FillSheng(); //2.市 FillShi(); //3.区 FillQu(); //省变化,市区跟着变 $("#sheng").change(function () { //改变市 FillShi(); //改变区 FillQu(); }) //市变化,区跟着变 $("#shi").change(function () { //改变区 FillQu(); }) //填充省的方法 function FillSheng () { //找到父级代号 var Pcode = "0001"; //调用Ajax $.ajax({ async:false, url:"5.20cl.php", data:{Pcode:Pcode}, type:"POST", dataType:"TEXT", success: function(d) { var str =""; var hang = d.split("|"); for(var i = 0 ; i"+lie[1]+""; } $("#sheng").html(str); } }) } //填充市的方法 function FillShi () { //找到父级代号 var Pcode = $("#sheng").val(); //市的父级代号 是省的下拉列表中的value值 //调用Ajax $.ajax({ async:false, url:"5.20cl.php", data:{Pcode:Pcode}, type:"POST", dataType:"TEXT", success: function(d) { var str =""; var hang = d.split("|"); for(var i = 0 ; i "+lie[1]+""; } $("#shi").html(str); } }) } //填充区的方法 function FillQu () { //找到父级代号 var Pcode = $("#shi").val(); //区的父级代号 是市的下拉列表中的value值 //调用Ajax $.ajax({ async:false, url:"5.20cl.php", data:{Pcode:Pcode}, type:"POST", dataType:"TEXT", success: function(d) { var str =""; var hang = d.split("|"); for(var i = 0 ; i "+lie[1]+""; } $("#qu").html(str); } }) }});
PHP处理代码:
str_ajax($sql);
JS简化代码:
$(document).ready(function(e) { $("#sj").html(""); //制作三个下拉列表 //填充内容 //1.省 Fill ('0001','#sheng'); //2.市 Fill ($("#sheng").val(),'#shi'); //3.区 Fill ($("#shi").val(),'#qu'); //省变化,市区跟着变 $("#sheng").change(function () { //改变市 Fill ($("#sheng").val(),'#shi'); //改变区 Fill ($("#shi").val(),'#qu'); }) //市变化,区跟着变 $("#shi").change(function () { //改变区 Fill ($("#shi").val(),'#qu'); }) //简便方法 function Fill (Pcode,id) { $.ajax({ async:false, url:"5.20cl.php", data:{Pcode:Pcode}, type:"POST", dataType:"TEXT", success: function(d) { var str = ""; var hang = d.split("|"); for(var i = 0; i"+lie[1]+""; } $(id).html(str); } }) }});