jquery和ajax實現省市區三級連動封裝和不封裝兩種方式-js教程-PHP中文網

首頁

web前端

js教程

jquery和ajax實現省市區三級連動封裝和不封裝兩種方式

小云云

Jan 12, 2018 am 09:26 AM

ajaxjquery省市區

本文主要為大家詳細介紹了jquery+ajax實現省市區三級連動的相關代碼，包括封裝和不封裝兩種方式，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助大家。

首先，要實現如下圖效果，

1、要理清思路：

先做出三個下拉式選單- ---根據第一個下拉式選單的value值取得第二個下拉清單的內容，第三個同理。

2、用到的資料庫表：Chinastates表

#規則：根據國家級（中國）的areacode查詢省級(如：北京) ;根據省級的areacode查詢市級（如：北京市轄）；根據市級的areacode查詢區級（如東城區）

第一種方式：沒有用到封裝，資料讀取較慢，可以看看原理，這樣在第二種方式封裝時就容易多了。

程式碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="../jquery-1.11.2.min.js"></script>
 </head>
 <body>
 <select id="sheng"></select>
 <select id="shi"></select>
 <select id="qu"></select>
 </body>
</html>
<script type="text/javascript"> 
 $(document).ready(function(e){ 
 //输出省
 var code = "0001";
 $.ajax({ 
  async:false,
  //取消异步
  url:"chuli.php",
  data:{code:code},
  type:"POST",
  dataType:"TEXT",
  success:function(data){    
   var hang = data.trim().split("|"); //trim()去空格
   var str=""; 
   for(var i=0;i<hang.length;i++)
   {
   var lie = hang[i].split("^");
   str = str+"<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
   }
   $("#sheng").html(str);  
  }   
 });
//输出市
 $("#sheng").click(function(){ 
 var code2=$("#sheng").val(); 
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code2},
  type:"POST",
  dataType:"TEXT",
 success:function(data2){
 
  var hang2 = data2.trim().split("|");
 
  var str2 ="";
  for(var i=0;i<hang2.length;i++)
  {
   var lie2=hang2[i].split("^");
   str2 = str2 +"<option value =&#39;"+lie2[0]+"&#39;>"+lie2[1]+"</option>";
  }
  $("#shi").html(str2);
  }  
 }); 
 })
//输出区县
$("#shi").click(function(){
 var code3=$("#shi").val();
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code3},
  type:"POST",
  dataType:"TEXT",
  success:function(data3){
  var hang3 = data3.split("|");
  var str3 ="";
  for(var i=0;i<hang3.length;i++)
  {
   var lie3=hang3[i].split("^");
   str3 = str3 +"<option value =&#39;"+lie3[0]+"&#39;>"+lie3[1]+"</option>";
  }
  $("#qu").html(str3);
  }  
 });
 })
})
</script>

期間出現的問題：每個下拉清單的第一個資料輸不出來：是因為每個下拉清單的第一個資料的value值都帶有空格！！！所以在輸出data時要去空格！！！

data傳回的值可能帶有空格換行等，所以要用trim()方法去空格！！！

第二種方式：封裝成插件，以後可以隨時呼叫（重要）

（1）主頁：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title><br>//引入jquery包
 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件
 <script src="sanji.js"></script>
 </head>
 <body><br>//id要与封装的js插件中一致
 <p id="sanji"></p>
 </body>
</html>

（2）我們自己封裝的js外掛程式

$(document).ready(function(e){
 //扔三个下拉列表到主页面建的p中
 $("#sanji").html("<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>"); 
 //加载省的数据
 LoadSheng();
 //加载市的数据
 LoadShi();
 //加载区的数据
 LoadQu();
 //给省的下拉列表添加点击事件，当省变化时，对应的市和区会发生变化
 $("#sheng").click(function(){
 LoadShi();
 LoadQu();
 }) 
 //给市的下拉列表添加点击事件，当市变化时，对应的区发生变化
 $("#shi").click(function(){
 LoadQu();
 })
 
});

//加载省的下拉列表
function LoadSheng() {
 var pcode = "0001";
 $.ajax({
 async: false,
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value=&#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#sheng").html(str);
 }
 });
}

//加载市省的下拉列表
function LoadShi() {
 var pcode = $("#sheng").val();
 $.ajax({
 async: false,
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#shi").html(str);
 }
 });
}

//加载省的下拉列表
function LoadQu() {
 var pcode = $("#shi").val();
 $.ajax({
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#qu").html(str);
 }
 });
}

其次就是處理頁面(兩種方法都用到的)：chuli. php

<?php
$code=$_POST["code"];
require "DB.class.php";
$db=new DB();
$sql="select areacode,areaname from chinastates where parentareacode=&#39;{$code}&#39;";
$str=$db->strquery($sql);
echo $str;

最後就是封裝的類別檔案：DB.class.php

function strquery($sql)
 {
 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
 $result = $db ->query($sql);
 $arr =$result->fetch_all(); 
 $str="";
 foreach($arr as $v)
 {
 $str=$str.implode("^",$v)."|";
  }
 $str = substr($str,0,strlen($str)-1);
 return $str;
  }
}
?>

相關推薦：

Jquery、Ajax、xml實作三級連動選單效果

ajax三級聯動的實作方法

#用vue.js模仿京東省市區三級連動的選擇元件

以上是jquery和ajax實現省市區三級連動封裝和不封裝兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles