Ajax Cascade Menu Implementation Method Example analysis _javascript skills

This article describes the Ajax cascading menu implementation method. Share to everyone for your reference, specific as follows:

The effect is as follows:

Select the first item, and the second and third items are changed accordingly.
Select the second item, and the third item changes as follows.
The third item does not affect the first and second items.

There are a few points worth mentioning:

1.html in the end is the foreground stitching or backstage stitching.

I choose the foreground stitching, which can save traffic, and the background of resources. This is also more in line with program processing, the general background is only responsible for providing data.

Passed to the front desk through JSON, and finished the reception for processing.

Ajax functions

Function Ajaxgetbigclass (val) {
  $.ajax ({
      type: "POST",
      async:false, 
      URL: "/default/index/ajax/do/ Ajaxgetbigclass ",
      data:" typeid= "+val,
      success:function (response) {
        if (response) {
          res = response;
        } else{
          res = false;}}
    );
  return res;
}
Function Ajaxgetsmallclass (val) {
  $.ajax ({
      type: "POST",
      async:false, 
      URL: "/default/index/ Ajax/do/ajaxgetsmallclass ",
      data:" bigclassid= "+val,
      success:function (response) {
        if (response) {
          res = response;
        } else{
          res = false;}}
    );
  return res;
}

Background AJAX processing Code

Case ' Ajaxgetbigclass ': 
$typeid = Trim ($this->_getparam (' typeid '));
$daoNews = new Dao_news ();
if (Isset ($typeid)) {
  $bigClass = $daoNews->getbigclassbytype ($typeid, true);
  if ($bigClass) {
    $json = Json_encode ($bigClass);
    echo $json;
  } else{
    echo FALSE;
  }
} else{
  echo FALSE;
}
break;
Case ' Ajaxgetsmallclass ': 
$bigclassid = Trim ($this->_getparam (' Bigclassid '));
$daoNews = new Dao_news ();
if (Isset ($bigclassid)) {
  $smallClass = $daoNews->getsmallclassbybigclass ($bigclassid, true);
  if ($smallClass) {
    $json = Json_encode ($smallClass);
    echo $json;
  } else{
    echo FALSE;
  }
} else{
  echo FALSE;
}
Break

Calling Ajax functions and stitching them into HTML functions

function Setbigclass (id,flag) {var flag = Arguments[1]? arguments[1]: false;//default value var res = Ajaxgetbigclass (ID)
    ;
    Alert (res);
      if (res) {myobj = eval (res); for (Var i=0;i<myobj.length;i++) {strhtml+= "<option value=" "+myobj[i].id+" ' > "+myobj[i].name+" </optio
      N> ";
    $ ("#bigclassid"). HTML (strhtml);
      }else{var strhtml = "<option value= ' > No child options </option>";
    $ ("#bigclassid"). HTML (strhtml);
    } if (flag&&res) {return myobj[0].id;
    } function Setsmallclass (ID) {var res = Ajaxgetsmallclass (ID);
    Alert (res);
      if (res) {myobj = eval (res);
      var strhtml = "<option value=" > Please select </option>; for (Var i=0;i<myobj.length;i++) {strhtml+= "<option value=" "+myobj[i].id+" ' > "+myobj[i].name+" </optio
      N> ";
    $ ("#smallclassid"). HTML (strhtml); }else{var strhtml = "<option value=" > Please select </option><optionValue= ' > No child options </option>;
  $ ("#smallclassid"). HTML (strhtml);

 }
}

Main function, event action

$ (function () {
  //ajax
  $ ("#typeid"). Change (function () {
    var id = $ (this). Val ();
    var res = Setbigclass (id,true);
    if (res) {
      setsmallclass (res);
    } else{
      setsmallclass (0);
    }
  });
  $ ("#bigclassid"). Change (function () {
    var id = $ (this). Val ();
    Setsmallclass (ID);
  });

2. Background query function.

Public Function GetType ($where = false, $order = ' typeid ASC ', $pagesize = False, $offset = False, $count = False, $from = False, $join = False, $group = False) {return $this->getdata ($this->_typename, $where, $order, $pagesize, $offset,
$count, $from, $join, $group);
    The Public Function gettypename ($flag =false) {$where = array ();
    $aType = $this->gettype ($where); if ($aType) {if ($flag) {foreach ($aType as $key => $value) {$type [$key] [' id '] = $value [' typeid '
          ];
        $type [$key] [' name '] = $value [' TypeName '];
      return $type;
        }else{foreach ($aType as $key => $value) {$type [$value [' typeid ']] = $value [' TypeName '];
      return $type;
    }}else{return false; The Public function Getbigclass ($where = false, $order = ' Bigclassid ASC ', $pagesize = False, $offset = false, $count = FA LSE, $from = FALSE, $join = False, $group = False) {return $this->getdata ($this->_bigName, $where, $order, $pagesize, $offset, $count, $from, $join, $group);
    The Public function getbigclassbytype ($typeid =, $flag =false) {$where = array ();
    $where [' Bigclass.typeid =? '] = Array ("Type" =>1, "Val" => $typeid);
    Print_r ($where); exit; 
    $from = Array (' Bigclassid ', "Bigclassname", "convert (text,bigclassmaster) as Bigclassmaster", "typeID");
    $aBigClass = $this->getbigclass ($where, False, False, False, false, $from); if ($aBigClass) {if ($flag) {foreach ($aBigClass as $key => $value) {$bigClass [$key] [' id '] = $va
          lue[' Bigclassid '];
        $bigClass [$key] [' name '] = $value [' Bigclassname '];
      return $bigClass; }else{foreach ($aBigClass as $key => $value) {$bigClass [$value [' bigclassid ']] = $value [' Bigclassnam
        E '];
      return $bigClass;
    }}else{return false; The Public function Getsmallclass ($where = false, $order = ' Smallclassid ASC ', $pagesize = False, $offset= False, $count = False, $from = False, $join = False, $group = False) {return $this->getdata ($this->_smallname,
$where, $order, $pagesize, $offset, $count, $from, $join, $group);
    The Public function getsmallclassbybigclass ($BigClassID = 221, $flag =false) {$where = array ();
    $where [' Smallclass.bigclassid =? '] = Array ("Type" =>1, "Val" => $BigClassID);
    Print_r ($where); exit;
    $aSmallClass = $this->getsmallclass ($where);  if ($aSmallClass) {if ($flag) {foreach ($aSmallClass as $key => $value) {$smallClass [$key] [' ID ']
          = $value [' Smallclassid '];
        $smallClass [$key] [' name '] = $value [' Smallclassname '];
      return $smallClass; }else{foreach ($aSmallClass as $key => $value) {$smallClass [$value [' smallclassid ']] = $value [' Small
        ClassName '];
      return $smallClass;
    }}else{return false;

 }
}

This can be used in many places, many angles.

3. Front desk js, file, the same function of JS placed in a JS file. Content is also finally functional.

<script type= "Text/javascript" src= "/js/news/cascade.js" ></script>
<tr>
<td width= " 20% "height=" align= "right" > Please select Category:</td> <td width= "80%" style= "padding:10px"
. >
<select id= "typeID" name= "typeID" class= "Ffb-input" >
    <!--{html_options options= $aType Selected= $aData. Typeid|default: ' 0 '}-->
</select>
>
<select id= ' bigclassid ' name= ' Bigclassid "class=" Ffb-input >
    <!--{html_options options= $aBigClass selected= $aData. Bigclassid|default : ' 0 '}-->
</select>
>
<select id= ' smallclassid ' name= ' smallclassid ' class= ' ffb-input ">
    <option value=" > Please select </option>
    <!--{html_options class= "ffb-input" options=$ Asmallclass selected= $aData. Smallclassid|default: ' 0 '}-->
</select>
</td>
</tr >

This will make the file very clear.

After the optimization of JS

$ (function () {//ajax $ ("#typeid"). Change (function () {var id = $ (this). Val ();
  Setbigclass (ID);
  });
    $ ("#bigclassid"). Change (function () {var id = $ (this). Val ();
  Setsmallclass (ID);
});
});
    function Setbigclass (ID) {var res = Ajaxgetbigclass (ID);
    var strhtml;
      if (res) {myobj = eval (res); for (Var i=0;i<myobj.length;i++) {strhtml+= "<option value=" "+myobj[i].id+" ' > "+myobj[i].name+" </option
      > ";
      $ ("#bigclassid"). HTML (strhtml);
    $ ("#bigclassid"). Show (). change ();
      }else{$ ("#bigclassid"). Hide ();
    $ ("#smallclassid"). Hide ();
    } function Setsmallclass (ID) {var res = Ajaxgetsmallclass (ID);
      if (res) {myobj = eval (res);
      var strhtml = "<option value=" > Please select </option>; for (Var i=0;i<myobj.length;i++) {strhtml+= "<option value=" "+myobj[i].id+" ' > "+myobj[i].name+" </optio
      N> ";
      $ ("#smallclassid"). HTML (strhtml); $ ("#smAllclassid "). Show ();
  }else{$ ("#smallclassid"). Hide (); } function Ajaxgetbigclass (val) {$.ajax ({type: POST), Async:false, url: "/default/index/ajax/do/aja 
        Xgetbigclass ", Data:" Typeid= "+val, success:function (response) {if (response) {res = response;
        }else{res = false;
  }
      }
    });
return res; Function Ajaxgetsmallclass (val) {$.ajax ({type: POST), Async:false, url: "/default/index/ajax/do/aja Xgetsmallclass ", Data:" Bigclassid= "+val, success:function (response) {if (response) {res = res
        Ponse;
        }else{res = false;
  }
      }
    });
return res;

 }

More readers interested in JavaScript-related content can view this site: "JavaScript Ajax Operating Skills Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.