How to implement three-level linkage menu in ajax php-PHP Problem-php.cn

How to implement three-level linkage menu in ajax php

藏色散人

Release： 2023-03-12 19:34:01

Original

2263 people have browsed it

Ajax PHP method to implement a three-level linkage menu: 1. Write a page to reference "sanjiliandong_fengzhuang.js"; 2. Implement the logic of the drop-down menu; 3. Add events to the drop-down menu items; 4. Through AJAX Traverse the database; 5. Create a data processing page.

How to implement three-level linkage menu in ajax php

The operating environment of this article: Windows 7 system, PHP version 7.1, Dell G3 computer.

How does ajax php implement a three-level linkage menu?

php ajax’s three-level linkage drop-down menu

encapsulates a three-level linkage menu With cascade linkage, you can reference it on any page

First write a page to reference this js

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>三级联动</title>
        <script src="../jquery-1.11.2.min.js"></script> //引入的jQuery的包
        <script src="sanjiliandong_fengzhuang.js"></script>  //引入下面的写的三级联动的封装js
</head>
    
<body>
    	<p id="sanji">
        　　　//引用的三级联动js
        </p>
</body>

Copy after login

1. First, it will be run after the page is loaded, so you must write # at the beginning. ##

$(document).ready(function(e) {
   　　//写入方法
});

Copy after login

You can first write the method names of provinces, cities, and districts

//填充省的方法
function FillSheng()
{
　　//方法的功能
}
//填充市的方法
function FillShi()
{
　　//方法的功能
}
//填充区的方法
function FillQu()
{
　　//方法的功能
}

Copy after login

2. First consider the logic of the drop-down menu, and don’t rush to write the function: after the page is loaded, there are three Drop-down menu, the element of the menu is select, give each menu a name, which is convenient for writing methods.

var str = "<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>";  //三个下拉菜单项
$("#sanji").html(str);  //将菜单交个要使用这个封装的页面的p中

Copy after login

3. During execution, the province, city, and district are displayed in sequence, and then the method can be written ( Notes in 1)

FillSheng();  //填充省的方法
FillShi();  //填充市的方法
FillQu();  //填充区的方法

Copy after login

4. The three menu items are linked, that is, there are different options according to different provinces

You can add events to the drop-down menu items, which is not used here. Click the event, you can use the change event change()

(1) Click the province, the city and district will change the display

$("#sheng").change(function(){  //改变省，下面的市和区显示
　　FillShi();
　　FillQu();
})

Copy after login

(2) Click the city, the district will change the display

$("#shi").change(function(){  //这里就是改变区的
　　FillQu();
})

Copy after login

In this way, the logic is explained above, and the following is to write functions for each method

5. Filling the province method

This depends on the information in the table, My table looks like this:

It is not difficult to see the pattern. You can see the area code and the parent code. Through 11---the 11 of the parent, you can also see the pattern. That is, the corresponding city can be found through the province; and then the corresponding district can be found through 1101---the parent's 1101, that is, the corresponding district can be found through the city

There is only one province in China, so directly define a code name: "0001", and then traverse the database through AJAX to find the provinces belonging to China

function FillSheng()
{
	var pcode = "0001";   //定义的代号是0001
	$.ajax({
	　　async:false,  //默认是同步的，false是异步进行
	　　url:"sanjiliandong_chuli.php",  //处理数据的处理页面
	　　data:{pcode:pcode},  
	　　type:"POST",  //数据传输方式
	　　dataType:"TEXT",
	　　success: function(data){
		　　//处理页面结束后执行的代码
		}
	});
}

Copy after login

Data processing page:

<?php
include("DBDA.class.php");  //调用封装好的数据库
$db = new DBDA();  //造新对象

$pcode = $_POST["pcode"];  //取出传过来的值

$sql = "select * from chinastates where parentareacode=&#39;{$pcode}&#39;";  //找出父级代号等于传过来的值得全部信息

echo $db->StrQuery($sql);  //执行代码，转换为字符串类型：封装的转变方式在上一篇随笔中写过一遍

Copy after login

After the processing page is executed, the method after success in the ajax method The statement after the end of writing

is a string, so it needs to be split, the rows and columns must be unpacked, and the result is given to the provincial drop-down menu

var hang = data.split("|");  //拆分行，根据“|”
var str = "";
for(var i=0;i<hang.length;i++)
{
	var lie = hang[i].split("^"); //拆分列，根据“^”
	str += "<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>"; //显示索引是1的也就是名称那一列，菜单项的值是表中的地区代号那一列
}
$("#sheng").html(str); //结果放入省的下拉菜单

Copy after login

to execute the page that references js The effect is:

6. The method of filling in the city and district

Its writing is similar to that of the province, and the processing page is the same. The difference is the value transferred

//填充市的方法
function FillShi()
{
　　//方法的功能，除了这两项不一样，其他的都一样
}

Copy after login

Define a value that fills the province in the city menu. At the end of the last traversal, the value is written into the city's drop-down menu.

var pcode = $("#sheng").val();  //将省的值在市中

Copy after login

At the end of the ajax traversal, the value is written into the city's drop-down menu. Menu

$("#shi").html(str);

Copy after login

//填充区的方法
function FillQu()
{
　　//方法的功能，除了这两项，其他的都没变过
}

Copy after login

The area is to define the value of a filled city. During the final traversal, the value is written into the drop-down menu of the area.

var pcode = $("#shi").val();   //将市值定义在区中

Copy after login

At the end of the ajax traversal, the value is written into The district’s drop-down menu

$("#qu").html(str);

Copy after login

The final effect is to change a drop-down menu, and both the city and district drop-down menus become

Recommended Study: "

PHP Video Tutorial"

The above is the detailed content of How to implement three-level linkage menu in ajax php. For more information, please follow other related articles on the PHP Chinese website!