本文實例為大家分享了ajax實現三級聯動的具體代碼，供大家參考，具體內容如下
1.首先在一個頁面上布置一個div 方便日后引用方法
<body><div id="sanji">//div的id為“sanji”</div>
2.sanji js處理頁面
$(document).ready(function(){ //向div里面放三個下拉菜單 var str = "<select id='sheng'></select> <select id='shi'></select> <select id='qu'></select>"; //給三個下拉列表定義 str 變量 $("#sanji").html(str); FillSheng(); FillShi(); FillQu();//Sheng Shi Qu的邏輯順序 $("#sheng").change(function(){ FillShi(); FillQu(); })//給sheng菜單添加點擊事件 $("#shi").change(function(){ FillQu(); })//給shi菜單添加點擊事件});//頁面加載完成之后過來執行某些代碼 3.填充sheng方法
function FillSheng(){ var pcode = "";//定義一個變量 $.ajax({ url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success:function(data){ var hang = data.split("^"); str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#sheng").html(str); });}2.填充shi方法
function FillShi(){ var pcode = $("#sheng").val(); $.ajax({ async:false, url:"chuli.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>"; } $("#shi").html(str); } });}3.填充qu方法
function FillQu(){ var pcode = $("#shi").val(); $.ajax({ url:"chuli.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>"; } $("#qu").html(str); } });}4.chuli頁面
<?phpinclude("DBDA.class.php");$db = new DBDA();$pcode = $_POST["pcode"];$sql = "select * from chinastates where parentareacode='{$pcode}'";echo $db->StrQuery($sql);以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
