Ajax commodity Classification Three-level linkage simple implementation (case) _ajax related

Thinking Analysis:

Effect: When the page is loaded, using AJAX asynchronous back to the request data, loading a class of goods, when the choice of a class of goods loaded two-class goods, the choice of 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 (date) {
          $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 ($sel2,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 ' => ' 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 ' => '), AR Ray (' 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 []= $v;
  } return $result;

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

Above this AJAX commodity classification three-level linkage of the simple implementation (case) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.