Ajax 三 級 聯 動：

?

主要實現在下拉列表里中地區的選擇

---

?

JS代碼：

---

?

// JavaScript Document $(document).ready(function(e) {$("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //制作三個下拉列表//填充內容//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<hang.length;i++){var lie =hang[i].split("^");str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#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<hang.length;i++){var lie =hang[i].split("^");str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#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<hang.length;i++){var lie =hang[i].split("^");str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#qu").html(str); }})} });

---

?

PHP處理代碼：

---

?

<?php$Pcode = $_POST["Pcode"]; include ("database.class.php"); $db = new database();$sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode='{$Pcode}'"; echo $db->str_ajax($sql);

?

---

JS簡化代碼：

---

$(document).ready(function(e) {$("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //制作三個下拉列表//填充內容//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<hang.length; i++){var lie = hang[i].split("^");str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$(id).html(str);}})}});

?

轉載于:https://www.cnblogs.com/Itwonderful/p/5511042.html

總結

以上是生活随笔為你收集整理的Ajax三级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。