国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

ajax三級聯動下拉菜單效果

來源:懂視網 責編:小采 時間:2020-11-27 22:51:40
文檔

ajax三級聯動下拉菜單效果

ajax三級聯動下拉菜單效果:ajax寫三級聯動,先寫一個文件類吧,以后用的時候直接調用即可; 來找一張表: 實現: 中國地域的三級聯動:省、市、區; 圖: 說一下思路: (1)當用戶選擇省份的時候觸發事件,把當前的省份的id通過ajax發出請求傳遞到服務端的程序中 (2)比如取中國
推薦度:
導讀ajax三級聯動下拉菜單效果:ajax寫三級聯動,先寫一個文件類吧,以后用的時候直接調用即可; 來找一張表: 實現: 中國地域的三級聯動:省、市、區; 圖: 說一下思路: (1)當用戶選擇省份的時候觸發事件,把當前的省份的id通過ajax發出請求傳遞到服務端的程序中 (2)比如取中國

ajax寫三級聯動,先寫一個文件類吧,以后用的時候直接調用即可;

來找一張表:

實現:

中國地域的三級聯動:省、市、區;

圖:

說一下思路:

(1)當用戶選擇省份的時候觸發事件,把當前的省份的id通過ajax發出請求傳遞到服務端的程序中

(2)比如取中國地域,中國是0001,那么自帶號為0001的便是中國地域;

北京的代號為11,那么子代號為11的便是北京時的市區,

也就是說根據主代號查詢子代號;

(3)服務端根據客戶端的請求,查詢數據庫,并按照一定的格式返回給客戶端

顯示頁面非常簡單,只需要一個div,并引入js與jquery文件即可:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>無標題文檔</title>
 <script src="jquery-1.11.2.min.js"></script>
 <script src="sanji.js"></script>
</head>
<body>
<h1>三級聯動</h1>
<div id="sanji"></div>
</body>
</html>

我需要三個下拉框select,并賦予id寫方法

先來寫三個下拉框附上id,并執行三個方法:

$(document).ready(function(e){
 //三個下拉列表
 //加載顯示數據
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 //加載省份

 FillSheng();
 //加載市
 FillShi();
 //加載區
 FillQu();
}

接下來去寫方法;

三個菜單是聯動的,也就是根據省的不同可以有不同的選項

這里就不要用click()點擊事件了;用改變狀態時執行的改變事件change()

(1)當省份發生變化的時候:

 //當省份發生變化
 $("#sheng").change(function(){
 FillShi();

 FillQu();
 })

市區,區縣發生改變

(2)當市區發生變化:

//當市發生改變
 $("#shi").change(function(){
 FillQu();
 })
});

區縣發生變化;

這個邏輯沒毛病;

再來就是把省份的信息加載粗來,并在寫完ajax的遍歷結束時,值寫入市的下拉菜單:

//加載省份信息
function FillSheng()
{
 //根據父級代號
 //取父級代號
 var pcode = "0001";
 //根據父級代號查數據
 $.ajax({
 async:false,
 url:"cl.php",
 data:{pcode:pcode},
 type:"POST",
 dataType:"JSON",
 success:function(data)
{
 var str = "";
 for(var sj in data)
 {

 str = str+"<option value = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
 }
 $("#sheng").html(str);
}
 });
}

//加載市
function FillShi()
{
 //根據父級代號
 //取父級代號
 var pcode = $("#sheng").val();
 //根據父級代號查數據
 $.ajax({
 async:false,
 //取消異步
 url:"cl.php",
 data:{pcode:pcode},
 type:"POST",
 dataType:"JSON",
 success:function(data)
{
 var str = "";
 for(var sj in data)
 {

 str = str+"<option value = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
 }
 $("#shi").html(str);
}
});
}
//加載區
function FillQu()
{
 //根據父級代號
 //取父級代號
 var pcode = $("#shi").val();
 //根據父級代號查數據
 $.ajax({

 url:"cl.php",
 data:{pcode:pcode},
 type:"POST",
 dataType:"JSON",
 success:function(data)
{
 var str = "";
 for(var sj in data)
 {

 str = str+"<option value = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
 }
 $("#qu").html(str);
}
});
}

這里的格式用的是JSON 之前都是用"TEXT"

注:JSON

JSON是一種傳遞對象的語法,對象可以是name/value對,數組和其他對象

我們用到的是數組,那么我們就需要遍歷數組,取到每一條數據,在js中遍歷數組用到的是

for(var sj in data)

{

}

來遍歷數組。格式!??!

這里來寫上面說的那個文件封裝類,找到我們以前我們的連接數據庫的類:

加上這段:

public function jsonQuery($sql,$type=1)
 {
 $db = new mysqli($this->host,$this->zhang,$this->mi,$this->dbname);
 $r = $db->query($sql);
 if($type == "1")
 {
 $arr = $r->fetch_all(MYSQLI_ASSOC);


 return json_encode($arr);
//去掉最后豎線
 }
 else
 {
 return $r;
 }
 }
}

嗯,沒錯

處理頁面:

最后來說處理頁面:

<?php
$pcode = $_POST["pcode"];
include ("db.class.php");
$db = new db();

$sql = "select * from chinastates where ParentAreaCode = '{$pcode}'";
echo $db->jsonQuery($sql);

連上數據庫,對象調用類,寫完sql語句直接返回就歐克?。。?/p>

就是這么短!

效果圖:

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

ajax三級聯動下拉菜單效果

ajax三級聯動下拉菜單效果:ajax寫三級聯動,先寫一個文件類吧,以后用的時候直接調用即可; 來找一張表: 實現: 中國地域的三級聯動:省、市、區; 圖: 說一下思路: (1)當用戶選擇省份的時候觸發事件,把當前的省份的id通過ajax發出請求傳遞到服務端的程序中 (2)比如取中國
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 一区二区精品 | 日本一区二区不卡在线 | 亚洲另类色图 | 国产在线午夜 | 国产精品一区二区免费 | 国产一二三区在线 | 九九精品免视看国产成人 | 久久国产精品视频一区 | 国外欧美一区另类中文字幕 | 亚洲午夜久久久久久久久电影网 | 午夜视频hd | 欧美成人免费高清视频 | 美女露胸动态无遮挡 | 久久久久久国产精品免费 | 久久精品亚洲欧美日韩久久 | 国模冰冰炮交图后02 | 综合 欧美 国产 视频二区 | 国产在线欧美日韩一区二区 | 精品国产日韩亚洲一区在线 | 九九久久亚洲综合久久久 | 国产在线观看网站 | 国产资源一区 | 青青操在线视频 | 亚洲欧洲精品成人久久曰影片 | 日本国产一区二区三区 | 在线精品欧美日韩 | 日韩欧美一区二区三区免费看 | 亚洲欧美日韩国产色另类 | 久久久久免费精品国产小说 | 国产视频高清 | 伊人久久中文字幕 | 多人伦精品一区二区三区视频 | 韩日欧美 | 亚洲欧洲日本在线观看 | 亚洲一区二区免费视频 | 国产综合一区二区 | 韩国精品一区二区久久 | 可以免费看的毛片 | 91亚洲国产成人久久精品网站 | 亚洲欧美日韩综合网导航 | 国产精品久久久久一区二区 |