Ajax + php achieves three levels of Product Classification Association,

Ajax + php achieves three levels of Product Classification Association,

When a page is loaded, ajax is used to asynchronously request data from the background to load the first-level product category. When the first-level product is selected, the second-level product is loaded and the second-level product is loaded.

Implementation:
1. After obtaining the data, load the product with a pid of 0, dynamically create an option to append the product to the level-1 menu, and set the value.
2. When you select a level-1 item, load the item with pid = current id, create an option to append the item to the level-2 menu, and set the value.
3. When you select a second-level item, load the item with pid = current id, create an option to append the item to the Third-level menu, and set the value.

Page effect:

$ (Function () {// Request Path var url = "03goods. php "; // option default content var option =" <option value = '0'> not selected </option> "; // obtain the jq object var $ sel1 = $ (". sel1 "); var $ sel2 = $ (". sel2 "); var $ sel3 = $ (". sel3 "); // automatically generate a <option> element function createOption (value, text) {var $ option = $ (" <option> </option> "); $ option. attr ("value", value); $ option. text (text); return $ option;} // load data function ajaxSelect ($ select, id) {// get request $. get (url, {"pid": id}, function (data) {Specific select.html (option); for (var k in data) {$ select. append (createOption (data [k]. id, data [k]. name) ;}}, "json") ;}// automatically load the first drop-down menu ajaxSelect ($ sel1, "0 "); // load the second $ sel1.change (function () {var id = $ sel1.val (); if (id = "0") when selecting the first drop-down menu ") {export sel2.html (option); export sel3.html (option) ;}else {ajaxSelect ($ sel2, id );}}); // load the third $ sel2.change (function () {var $ id = $ sel2.val (); if ($ id = "0") when selecting the second drop-down menu ") {export sel3.html (option) ;}else {ajaxSelect ($ sel3, $ id );}});});

Background code:

<? Php header ('content-Type: text/html; charset = UTF-8 '); // data $ arr = array (// array (Category id, category name, CATEGORY parent id) array ('id' => '1', 'name' => 'digital product', 'pid '=> '0 '), array ('id' => '2', 'name' => 'appliance ', 'pid' => '0 '), array ('id' => '3', 'name' => 'book', 'pid '=> '0 '), array ('id' => '4', 'name' => 'clothing ', 'pid' => '0 '), array ('id' => '5', 'name' => 'phone', 'pid '=> '1 '), array ('id' => '6', 'name' => 'notebooks ', 'pi' => '1 '), array ('id' => '7', 'name' => 'tablet ', 'pid' => '1'), array (' Id' => '8', 'name' => 'Smartphone ', 'pid' => '5'), array ('id' => '9 ', 'name' => 'function', 'pid '=> '5'), array ('id' => '10', 'name' =>' TV ', 'pid '=> '2'), array ('id' => '11', 'name' => 'refrigerator', 'pid '=> '2 '), array ('id' => '12', 'name' => 'smart TV ', 'pid' => '10 '), array ('id' => '13', 'name' => 'Programming Book', 'pid '=> '3 '), array ('id' => '14', 'name' => 'javascript ', 'pid' => '13 '),); // function getByPid ($ arr, $ pid) {$ result = array (); foreach ($ arr as $ v) {if ($ v ['Pid '] = $ pid) {$ result [] = $ v ;}} return $ result ;} // obtain the request parameter $ pid = isset ($ _ GET ['pid '])? $ _ GET ['pid ']: '0'; $ result = getByPid ($ arr, $ pid); // The output json data echo json_encode ($ result);?>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.