ThinkPHP usage tips-ThinkPHP + Ajax implement two-level linkage drop-down menu

Source: Internet
Author: User
The data in the linkage menu exists in the Database. You can add, delete, modify, and modify menu data at any time without modifying the Code. At the same time, after two levels are implemented, three levels can be implemented, level 4... And other associated menus

The data in the linkage menu exists in the Database. You can add, delete, modify, and modify menu data at any time without modifying the Code. At the same time, after two levels are implemented, three levels can be implemented, level 4... And other associated menus

The first is the database design. The category table is cate.

I am working on the secondary Association of classified data. The fields required for the data are: id, name (Chinese name), pid (parent id ).

Parent id settings: if the data does not have the upper level, the parent id is 0. If there is a higher level, the parent id is the id of the upper level.

After the database has content, you can start to write code for implementation of level-2 Association.

First, obtain all the data with a pid of 0 in php in the background, save it to $ cate, and thenUse foreach for loop output.Html code:The Code is as follows:
Select a type

{$ V. ca_name}


Tags:

Ajax code:

The Code is as follows:


$ ('# Type'). click (function (){
$ (This). change (function (){
Var objectModel = {};
Var value = $ (this). val ();
Var type = $ (this). attr ('id ');
ObjectModel [type] = value;
$. Ajax ({
Cache: false,
Type: "POST ",
Url: site. web + "lable ",
DataType: "json ",
Data: objectModel,
Timeout: 30000,
Error: function (){
Alert (site. web + "lable ");
},
Success: function (data ){
$ ("# Lables"). empty ();
Var count = data. length;
Var I = 0;
Var B = "";
For (I = 0; I B + =" "+ Data [I]. ca_name +"";
}
$ ("# Lables"). append (B );
}
});
});
}
);

Ajax code is triggered after the first layer type change. The main parameters of the ajax method include:

1. url: the address for receiving ajax requests from the background;

2. data: The data uploaded to the background, which is generally transmitted in json format. Here, the id value of the selected class is passed.

3. type: transfer method, which has get and post methods. I usually use post to transmit more data than get, which is more secure;

4. error: Method for ajax execution failure;

5. success: The method for successful ajax execution, that is, the callback function. When executing success, I first cleared the content of the second drop-down menu with empty () and then output the data obtained from the background.

The following is the page on which Thinkphp receives and processes ajax data.

The Code is as follows:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.