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

Source: Internet
Author: User

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.

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.