jquery and ajax realize three-level linkage encapsulation and non-encapsulation of provinces and municipalities

This article mainly introduces in detail the relevant codes of jquery+ajax to realize the three-level linkage of provinces and municipalities, including two methods of encapsulation and non-encapsulation, which has certain reference value. Interested friends can refer to it. I hope Can help everyone.

First of all, to achieve the effect as shown below,

#1. To clarify your ideas:

First make three drop-down menus - ---Get the contents of the second drop-down list based on the value of the first drop-down menu, and the same goes for the third one.

2. The database table used: Chinastates table

Rule: Query the provincial level (such as Beijing) based on the areacode of the national level (China); Query the municipal level (such as Beijing Municipality) according to the provincial area code; query the district level (such as Dongcheng District) according to the municipal area code

The first method:No encapsulation is used , data reading is slow, you can take a look at the principle, which will make it much easier to encapsulate in the second way.

The code is as follows:

Problems that occurred during the period: The first data of each drop-down list cannot be output: because each The value of the first data in the drop-down list all has spaces! ! ! So you need to remove spaces when outputting data! ! !

The value returned by data may contain spaces, line breaks, etc., so use the trim() method to remove spaces! ! !

Second method:Encapsulated into a plug-in, which can be called at any time later (important)

(1) Main page:

    
//引入jquery包 
//引用我们自己封装的js文件  
 
//id要与封装的js插件中一致 
  

(2) Our own encapsulated js plug-in

$(document).ready(function(e){ //扔三个下拉列表到主页面建的p中 $("#sanji").html(""); //加载省的数据 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 + "" + lie[1] + ""; } $("#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 + "" + lie[1] + ""; } $("#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 + "" + lie[1] + ""; } $("#qu").html(str); } }); }　　

The second step is to process the page (used in both methods): chuli. php

strquery($sql); echo $str;

The last is the encapsulated class file: 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; } } ?>

Related recommendations ：

Jquery, Ajax, xml to realize the three-level linkage menu effect

Ajax three-level linkage implementation method

Use vue.js to imitate the selection component of JD.com’s three-level linkage between provinces and cities

The above is the detailed content of jquery and ajax realize three-level linkage encapsulation and non-encapsulation of provinces and municipalities. For more information, please follow other related articles on the PHP Chinese website!