Simple implementation of three levels of Ajax Product Classification Association (case study ),

Simple implementation of three levels of Ajax Product Classification Association (case study ),

Train of Thought Analysis:

Effect: When a page is loaded, ajax is used to asynchronously request data from the background to load the first-level commodity category. When the first-level commodity is selected, the second-level commodity is loaded and the second-level commodity 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 simple implementation (case study) of the above three levels of Ajax product classification is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's home.