Ajax php实现商品分类三级联动

页面加载时，使用ajax从后台异步请求数据，加载一级商品类别，选择一级商品时加载二级商品，选择二级商品加载三级商品。

实施：1。获取数据后，加载pid为0的商品，并动态创建选项将商品追加到一级菜单，并设置值2。选择一级商品时，加载pid=当前id且设置值为3的商品。选择二级商品时，加载pid=当前id的商品，并创建选项将商品追加到三级菜单，并设置值

页面效果：

$(function(){ //请求路径var url=' 03goods.php//选项默认内容var option=' option value=' 0 '/option '未选中；//获取jq对象var $ sel 1=$(. sel 1 ')；var $ sel 2=$(. sel 2 ')；var $ sel 3=$(. sel 3 ')；//自动生成一个选项元素函数create option (value，text){ var $ option=$(' option/option ')；$option.attr('value '，value)；$option.text(文本)；返回$ option}//加载数据函数Ajax select ($ select，id) {//get request $。get (URL，{'PID' : id}，函数(数据){ $ select.html(选项)；for(var k in data){ $ select . append(CreateOption(data[k])。id，数据[k]。姓名))；} }，' JSON ')；}//自动加载第一个下拉菜单ajaxSelect($sel1，' 0 ')；//选中第一个下拉菜单时加载第二个$ sel 1 . change(function(){ var ID=$ sel 1 . val())；if(id=='0'){ $sel2.html(选项)；$sel3.html(选项)；}else{ ajaxSelect($sel2，id)；} });//选择第二个下拉菜单时加载第三个$ sel 2 . change(function(){ var $ ID=$ sel 2 . val())；if($id=='0'){ $sel3.html(选项)；}else{ ajaxSelect($sel3，$ id)；} });});背景代码：

？php头(' Content-type : text/html；charset=utf-8 ')；//data $arr=array(//array(分类id、分类名称、分类父id) array('id'='1 '，' name'=' digital product '，' PID'=' 0 ')、array ('id'=' 2 '，' name'=' PID'=' 0 ')、Array ('ID'=' 4 '，' Name '=' Clothing '，' PID'=' 0 ')、Array ('ID'=' 5 '，' Name'=' Mobile Phone '，' PID'=' 1 ')，' Name '=' tablet '，' PID'=' 1 ')、array('id ')数组(' id'='11 '，' name'='冰箱'，' PID'=' 2 ')，数组(' id'=' 12 '，' name'='智能电视'，' PID'=' 10 ')，数组(' id '=')//获取指定分类的商品函数getbypid ($ arr，$ PID){ $ result=array()；foreach($ arr as $ v){ if($ v[' PID ']==$ PID){ $ result[]=$ v；} }返回$ result}//获取请求参数$pid=isset($_GET['pid'])？$ _ GET[' PID ']: ' 0 '；$result=getByPid($arr，$ PID)；//输出json数据echo JSON _ encode($ result)；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。