laravel select联动操作实例

在我们写联动的时候,经常是定义死的一二三级关系。有的时候我们在select的属性是配置化的从控制器传递过来的数据,所以在写select 的级联的时候就需要动态的获取一二级的数据。

例如我们在管理产品时候,产品是那个事业部群下的事业部的,而事业部群事业部这些组织架构的东西,随着业务的调整,他会经常变,如果写死在JS里面,维护也忒不方便了。。。

HTML示例:

   <div class="form-group">
            <label for="">Category</label>
            <select class="form-control input-sm" required name="category" id="category">
            <option>Select a Category</option>
            @foreach($category as $row)
            <option value="{{$row->id}}">{{$row->name}}</option>
            @endforeach
            </select>
  </div> 
  <div class="form-group">
     <label for="">Subcategory</label>
       <select class="form-control input-sm" required name="subcateg" id="subcateg" >
            <option value=""></option>
           </select>
 </div> 

JS中:category一旦change,subcateg的select 就会去根据cagegory的value去获取相应的二级分类的option

<script>
      $('#category').on('change',function(e){       
         $('#subcateg').find('option').remove().end();
           var cat_id = $('#category option:selected').attr('value');           
             var info=$.get("{{url('_categorycasecading')}}",{cat_id:cat_id});
               info.done(function(data){     
                  $.each(data,function(index,subcatObj){
                     $('#subcateg').append('<option value="'+subcatObj.id+'">'+
                                subcatObj.name+'</option>');
                    });
        });            
        info.fail(function(){
          // alert('failed');
        });
      });

    </script>

在路由中这些来定义上面ajax的url:_categorycasecading:

Route::get('_categorycasecading',function(Request $request){
  $cat_id = $request::input(['cat_id']);    
  $subcategories=\App\Subcategory::where('category_id','=',$cat_id)->get();
  return Response::json($subcategories); 
 });

这样就实现了简单的动态级联:下面是演示,选择群组之后,就会显示相应的事业部。

casecading

 

喜欢 0

这篇文章还没有评论

发表评论