下拉框三级联动

下拉框模型关联

//    定义商品-商品分类关联 一个商品属于一个分类
    public function category()
    {
        return $this->belongsTo('Category','cate_id','id')->bind('cate_name');
    }
//    定义商品品牌关联，一个商品对应一个品牌
    public function brand()
    {
        return $this->belongsTo('Brand','brand_id')->bind(['brand_name'=>'name']);
    }
//    定义商品-商品类型关联 一个属性属于一个类型
    public function type()
    {
        return $this->belongsTo('Type','type_id','id')->bind('type_name');
    }

控制器

 public function create()
    {
//        找出一级分类数据 pid=0,
//          门面模式
          $categorys =new Gategory();
          $category=$categorys->where('pid',0)->select();
          return view('/product_add',['category'=>$category]);
    }

路由获取

Route::get('good','Goods/create');

获取路由添加

Route::post('categoryId','Goods/getCategoryId');

 控制器

 public function getCategoryId($pid)
     {
         $data= Gategory::where('pid',$pid)->select()->toArray();
         return json(['code'=>10000,'msg' => 'success','data'=>$data]);
     }

界面显示

 <select name="" class="select" id="cate_one">
        <option value="0">请选择一级分类</option>
        {foreach $category as $v}
           <option value="{$v.id}">{$v.cate_name}</option>
        {/foreach}
    </select>
    <select name="" class="select" id="cate_two">
        <option value="0">请选择二级分类</option>
    </select>
    <select name="" class="select" id="cate_three">
        <option value="0">请选择三级分类</option>
    </select>

js实现三级联动

     <script>
  $('#cate_one').change(function () {

      // 获取一级分类的值的id值
      var pid=$(this).val();
      $.ajax({
          'url': 'categoryId',
          'type': 'post',
          'data': {pid: pid},
          'success': function (res) {
              var str = '<option value="">请选择二级分类</option>';

              $.each(res.data,function (i,v) {
                  str += '<option value="' + v.id + '">' + v.cate_name +'</option>';

                  });
              $('#cate_two').html(str);
          }
      })

  })
</script>
<script>
    $('#cate_two').change(function () {

        // 获取一级分类的值的id值
        var pid=$(this).val();
        $.ajax({
            'url': 'categoryId',
            'type': 'post',
            'data': {pid: pid},
            'success': function (res) {
                var str = '<option value="">请选择三级分类</option>';

                $.each(res.data,function (i,v) {
                    str += '<option value="' + v.id + '">' + v.cate_name +'</option>';

                });
                $('#cate_three').html(str);
            }
        })

    })