Shulou(Shulou.com)06/03 Report--

This article introduces ajax php how to achieve three-level linkage menu, the content is very detailed, interested friends can use for reference, I hope it can be helpful to you.

Ajax php to achieve three-level linkage menu methods: 1, write a page to reference "sanjiliandong_fengzhuang.js"; 2, to achieve the logic of the drop-down menu; 3, to add events to the drop-down menu items; 4, through AJAX to traverse the database; 5, to create a data processing page.

This article operating environment: windows7 system, PHP7.1 version, Dell G3 computer.

How to realize the three-level linkage menu in ajax php?

The three-stage pull-down menu of php+ajax

Encapsulate a three-level linkage, which can be referenced on any page.

Write a page to quote this js first.

Three-stage linkage / / introduce the package of jQuery / / introduce the following three-stage linkage encapsulation js / / reference three-stage linkage js

1. First of all, it will not run until the page is loaded, so write at the beginning

$(document) .ready (function (e) {/ / write method})

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

/ / populate the provincial method function FillSheng () {/ / method function} / / fill the city method function FillShi () {/ / method function} / / fill the area method function FillQu () {/ / method function}

two。 First consider the logic of the drop-down menu, do not rush to write the function: after the page is loaded, there are three drop-down menus, and the menu element is select. Give a name for each menu, which is convenient to use when writing the method.

Var str = ""; / / three drop-down menu items $("# sanji") .html (str); / / put the menu into the p of the page to use this encapsulation

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

FillSheng (); / / method of filling province FillShi (); / / method of filling city FillQu (); / / method of filling area

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

You can add an event to a drop-down menu item. Instead of clicking the event, you can use the change event change ()

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

$("# sheng") .change (function () {/ / change province, the following cities and districts show FillShi (); FillQu ();})

(2) Click the city and change the display on the district.

$("# shi") .change (function () {/ / here is the FillQu () of the change zone;})

In this way, for the logic, which is the explanation above, the following is to write the function for each method.

5. The method of filling the province

This depends on the information in the table, which is as follows:

It is not difficult to see the law, the code name of the area and the parent code can be seen, through 11 murmur11, that is, the corresponding city can be found through the province, and then through 1101 Murray-1101 of the parent, that is, the corresponding district can be found through the city.

There is only one province in China, so define a code name "0001" directly, and then traverse the database through AJAX to find out which province belongs to China.

Function FillSheng () {var pcode = "0001" / / the code defined is 0001 $.ajax ({async:false, / / synchronous by default) False is an asynchronous url: "sanjiliandong_chuli.php", / / the processing page for processing data data: {pcode:pcode}, type: "POST", / / data transfer method dataType: "TEXT" Success: function (data) {/ / process the code executed after the end of the page}}) }

Processing page of the data:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.