Ajax+php realizes three-level linkage _ajax related to commodity classification

When the page is loaded, using AJAX asynchronous back to the table to request data, load a class of goods, when the choice of a class of goods loaded two-class goods, select two-class goods loaded three-class goods.

Realize:
1, when the data load PID 0 of merchandise, and dynamically create option to append items to the first level menu, and set value
2, when the choice of the first level of goods loaded pid= the current ID of the merchandise, and create option to append the item to level two menu, and set value
3, when the choice of two products loaded pid= current ID merchandise, and create option to append the item to the level three 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>";
  Gets the JQ object var $sel 1=$ (". Sel1");
  var $sel 2=$ (". Sel2");
  var $sel 3=$ (". Sel3");
  Automatically generates 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 (database) {$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 ($sel 1, "0");
  When you select the first Drop-down menu, load the second $sel 1.change (function () {var id= $sel 1.val ();
   if (id== "0") {$sel 2.html (option);
  $sel 3.html (option);
  }else{Ajaxselect ($sel 2,id);

  }
  });
  When you select the second Drop-down menu, load the third $sel 2.change (function () {var $id = $sel 2.val ();
  if ($id = = "0") {$sel 3.html (option);
  }else{Ajaxselect ($sel 3, $id);
 }
  });

 });

Background code:  

<?php header (' content-type:text/html; Charset=utf-8 '); Data $arr =array (//array (category ID, classification name, parent ID of category) array (' ID ' => ' 1 ', ' name ' => ' digital product ', ' pid ' => ' 0 '), array (' ID ' => ' 2 '), ' Name ' => ' Home appliance ', ' pid ' => ' 0 ', array (' ID ' => ' 3 ', ' name ' => ' book ', ' pid ' => ' 0 '), array (' ID ' => ' 4 ', ' name ' = > ' costume ', ' pid ' => ' 0 '), array (' ID ' => ' 5 ', ' name ' => ' mobile ', ' pid ' => ' 1 '), array (' ID ' => ' 6 ', ' name ' => ' notebook '), ' PID ' => ' 1 '), array (' ID ' => ' 7 ', ' name ' => ' tablet computer ', ' pid ' => ' 1 '), array (' ID ' => ' 8 ', ' Name ' => ' "smart phone ', ' pid ' = > ' 5 ', array (' ID ' => ' 9 ', ' name ' => ' function machine ', ' pid ' => ' 5 '), array (' ID ' => ', ' name ' => ' TV ', ' pid ' => ' 2 ')
 ), array (' ID ' => ', ' name ' => ' fridge ', ' pid ' => ' 2 '), array (' ID ' => ', ' name ' => ' smart TV ', ' pid ' => ' 10 '), Array (' ID ' => ', ' Name ' => ' programming book ', ' pid ' => ' 3 '), array (' ID ' => ', ' name ' => ' JavaScript ', ' pid ' => ')
 13 '),);
 Gets the commodity function getbypid ($arr, $pid) of the specified category {$result =array ();
  foreach ($arr as $v) {if ($v [' pid ']== $pid) {$result []=]; } RETUrn $result;

 //Get Request Parameters $pid =isset ($_get[' pid ')? $_get[' pid ': ' 0 ';
 $result =getbypid ($arr, $pid);
 Output JSON data echo json_encode ($result);?>

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.