TP5 三级联动

html

<div class="row cl">
   <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品分类：</label>
   <div class="formControls col-xs-8 col-sm-9">
      <span class="select-box" style="width:150px;">
         <select name="" class="select" size="1" id="cate_one">
            <option value="0">请选择一级分类</option>
            {foreach $category as $v}
            <option value="{$v.id}">{$v.cate_name}</option>
            {/foreach}
         </select>
      </span>
      <span class="select-box" style="width:150px;">
         <select name="" class="select" size="1" id="cate_two">
            <option value="0">请选择二级分类</option>
         </select>
      </span>
      <span class="select-box" style="width:150px;">
         <select name="cate_id" class="select" size="1" id="cate_three">
            <option value="0">请选择三级分类</option>
         </select>
      </span>
   </div>
</div>



js

$('#cate_one').change(function(){
   var pid = $(this).val();
   $.ajax({
      'url':'{:url("category/getSubCateByPid")}',
      'type':'post',
      'data':{'pid':pid},
      'dataType':'json',
      'success':function(response){
         if(response.code != 10000){
            alert(response.msg);return;
         }
         var str = '<option value="">请选择二级分类</option>';
         $.each(response.data, function(i,v){
            str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
         });
         $('#cate_two').html(str);
      }
   });
});
$('#cate_two').change(function(){
   var pid = $(this).val();
   $.ajax({
      'url':'{:url("category/getSubCateByPid")}',
      'type':'post',
      'data':{'pid':pid},
      'dataType':'json',
      'success':function(response){
         if(response.code != 10000){
            alert(response.msg);return;
         }
         var str = '<option value="">请选择三级分类</option>';
         $.each(response.data, function(i,v){
            str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
         });
         $('#cate_three').html(str);
      }
   });
});
$('#cate_three').change(function(){
   var cate_id = $(this).val();
   $.ajax({
      'url':'{:url("brand/getBrandByCateId")}',
      'type':'post',
      'data':{'cate_id':cate_id},
      'dataType':'json',
      'success':function(response){
         if(response.code != 10000){
            alert(response.msg);return;
         }
         var str = '<option value="">请选择商品品牌</option>';
         $.each(response.data, function(i,v){
            str += '<option value="' + v.id + '">' + v.name + '</option>';
         });
         $('#brand').html(str);
      }
   });
});

后台