Ajax three-level linkage product Classification (reprint)

Reprinted from Jines http://www.cnblogs.com/lijinblogs/p/5759399.html

Thinking Analysis:
Effect: When the page load, the use of Ajax asynchronous back to the table to request data, loading a class of goods, when the first level of products to load two-level products, select level two goods loaded three-level products.

Realize:
1, when the data to load the PID 0 of the product, and dynamically create option to append the product to the first level menu, and set the value
2. When you select a commodity, load the item with the current ID pid= and create option to append the item to the level two menu and set the value
3. Load the item with pid= current ID when selecting a level two item and create option to append the item to the level three menu and set the value

Page effect:

 1 $ (function () {2///Request path 3 var url= "03goods.php"; 4//option default content 5 var optio n= "<option value= ' 0 ' > not selected </option>"; 6//Get JQ object 7 var $sel 1=$ (". Sel1"); 8 var $sel 2=$ (". Sel2");                 9 var $sel 3=$ (". Sel3"); 10//Auto-Generate a <option> element function createoption (value,text) {12                var $option =$ ("<option></option>"), $option. attr ("value", value); 14 $option. Text (text); Ajaxsel 16}17//Load data ECT ($select, id) {//get request $.get (url,{"pid": id},function (data) {$sele ct.html (option); (var k in data) {$select. Append (Createoption (data[k].id            , Data[k].name)) (}25}, "JSON"), 26}27 28//Auto Load first drop-down menu 29 AjAxselect ($sel 1, "0"); 30 31//Select the first drop-down menu to load the second $sel 1.change (function () {var id= $se L1.val (), if (id== "0") {$sel 2.html (option), $sel 3.html (option            ); PNs}else{38 ajaxselect ($sel 2,id); 39}40}); 41 42 When you select the Second drop-down menu, load the third $sel 2.change (function () {$id var = $sel 2.val (), and if ($id =                = "0") {$sel 3.html (option),}else{48 Ajaxselect ($sel 3, $id); 49 }50}); 51});

Background code:

 1 <?php 2 header (' content-type:text/html; Charset=utf-8 ');       3//Data 4 $arr =array (5//array (category ID, category name, category's parent ID) 6 array (' id ' = ' = ' 1 ', ' name ' = ' digital product ', ' pid ' = ' 0 '), 7      Array (' id ' = ' 2 ', ' name ' = = ' home appliance ', ' pid ' = ' 0 '), 8 array (' id ' = ' 3 ', ' name ' = ' = ' book ', ' pid ' = ' 0 '), 9 Array (' id ' = ' = ' 4 ', ' name ' = = ' costume ', ' pid ' = ' 0 '), ' id ' = ' + ' 5 ', ' name ' = ' + ' phone ', ' pid ' = ' 1 ', one array ( ' id ' = ' 6 ', ' name ' + ' notebook ', ' pid ' = ' 1 ', ' the ' id ' = ' + ' 7 ', ' name ' = ' + ' tablet ', ' pid ' = ' 1 ', the array (' ID ' + ' 8 ', ' name ' = ' smart phone ', ' pid ' = ' 5 '), array (' id ' = ' + ' 9 ', ' name ' = ' + ' function machine ', ' pid ' = ' 5 '), and the array (' ID ' =& gt; ' Ten ', ' name ' = ' TV ', ' pid ' = ' 2 '), array (' id ' = ' + ', ' name ' = ' refrigerator ', ' pid ' = ' 2 '), ' + ' = ' 12 ' ', ' name ' = ' smart TV ', ' pid ' + ' ', ' (' id ' = ' + ', ' name ' = ' + ' programming book ', ' pid ' = ' 3 '), ' + ' (' id ' = ' 1   4 ', ' name ' = ' JavaScript ', ' pid ' = ' 13 '), 20); 21//Get the item in the specified category 22  function Getbypid ($arr, $pid) {$result =array (), ($arr as $v) {if ($v [' pid ']== $pid ) {$result []= $v;}28}29 return $result; 30}31//Get request Parameters $pid =i Sset ($_get[' pid '])? $_get[' pid ': ' 0 '; $result =getbypid ($arr, $pid); 35//Output JSON data echo Json_encode ($result ); PNs?>

Ajax three-level linkage product Classification (reprint)