First look at the interface:
When it comes to select linkage, I think of using AJAX to get the data loaded.
Then began to write, select is changed, trigger Ajax to go backstage to find data, the data to their own sub-classification data and the current selection of classification of commodity data.
After writing, found that some duplicate code, get the product of this data, interface and JS get the data Loop traversal code a number of repetitions, triggered three selection box event, all to obtain the corresponding classification of the product data, so to pull out.
Front-end JS code:
First selection box:
$ ("#pcate"). Change (function () {var pcate = This.value; $.getjson (' {php echo webUrl ("Order/print/ajaxccate")} ', {pcate:pcate},function (res) {if (Res.status = = 0) { var data = Res.result; var html = ' <option value= ' "selected> all </option> '; if (Data! = ") {$.each (data,function (index, category) {html + = ' <option val Ue= "' + category[' id '] + '" > ' + category[' name ' + ' </option> '; })} getgoods (); $ ("#ccate"). HTML (""); $ ("#ccate"). HTML (HTML); $ ("#tcate"). HTML ("<option value=" selected> all </option> "); }else{$ ("#ccate"). HTML ("<option value=" selected> all </option> "); $ ("#tcate"). HTML ("<option value=" selected> all </option> "); $ ("#title"). HTML ("<option VALue= "selected> all </option>"); } }) })
Second selection box:
$ ("#ccate"). Change (function () { var ccate = this. Value; var pcate = $ ("#pcate"). Val (); $.getjson (' {php echo webUrl ("Order/print/ajaxtcate")} ', {ccate:ccate,pcate:pcate},function(res) { if ( Res.status = = 0) { var data = Res.result; var html = ' <option value= ' selected> all </option> ' ; if (Data! = ") {$.each (data,function (index, category) {html + = ' <option value=" ' + category[' id ') + ' "> ' + category[' name '] + ' </option> ';}) } getgoods (); $ ("#tcate"). HTML (""); $ ("#tcate"). HTML (HTML);} else{getgoods (); $ ("#tcate"). HTML ("<option value=" selected> all </option> ")})
Third selection box:
$ ("#tcate"). Change (function () { getgoods (); })
Get Product:
function Getgoods () { var p = $ ("#pcate"). Val (); var C = $ ("#ccate"). Val (); var t = $ ("#tcate"). Val (); $.getjson (' {php echo webUrl ("Order/print/getgoods")} ', {tcate:t,pcate:p,ccate:c}, function(res) { if ( Res.status = = 0) {var data = Res.result; var html = ' <option value= ' "selected> all </option> '; if (Data! = ") {$.each (data,function (index, category) {html + = ' <option value=" ' + category[' id ') + ' ">" + category[' title ' + ' </option> ';}) } $ ("#title"). HTML (""); $ ("#title"
Background interface:
Public functionAjaxccate () {Global $_gpc,$_w; $pcate = intval ($_gpc[' pcate ']); if (Empty ($pcate) {return Show_json (1); } $ccate = Pdo_fetchall (' SELECT name,level,id from '. TableName (' Ewei_shop_category '). ' WHERE Uniacid =: uniacid and parentid =:p Arentid and level = 2 ORDER by Displayorder DESC ', Array (': Uniacid ' =>$_w[' Unia Cid '], ':p arentid ' = $pcate)); Show_json (0, $ccate); } public functionAjaxtcate () {Global $_gpc,$_w; $ccate = intval ($_gpc[' ccate ']); if (empty ($ccate)) return Show_json (1); $tcate = Pdo_fetchall (' Select Name,id from ' tablename (' ewei_shop_category ') ).‘ where uniacid =: uniacid and parentid =:p Arentid and level = 3 ORDER BY displayorder Desc ', Array (': Uniacid ' =>$_w[' Unia Cid '], ':p arentid ' = $ccate)); Show_json (0, $tcate), Public function Getgoods () {global $_gpc,$_w; $con = "; $tcate = intval ($_gpc[' TCA Te ']); $pcate = intval ($_gpc[' pcate ')), $ccate = Intval ($_gpc[' ccate ')), if (!empty ($pcate)) $con. = ' and Pcate = '. $pcat e; if (!empty ($ccate)) $con. = ' and Ccate = '. $ccate, if (!empty ($tcate)) $con. = ' and Tcate = '. $tcate; $s QL = ' Select Title,id from '. TableName (' Ewei_shop_goods '). ' where Uniacid = '. $_w[' Uniacid ']. $con; $title = Pdo_fetchall ($sql); Show_json (0, $title);}
JS three-level linkage (better thinking)