【问题标题】:Laravel 5.4 - Populate dropdown based on another dropdown selected valueLaravel 5.4 - 根据另一个下拉选择值填充下拉列表
【发布时间】:2017-07-30 18:34:38
【问题描述】:

我希望在从第一个下拉列表中选择一个值时根据第一个下拉列表值自动填充另一个下拉列表。

我的看法:

 <label for="category">Catégorie(s):</label>       
        {!! Form::select('category', $category,null, array('class' => 'form-
 control')) !!}
  <label for="brand">Marque:</label> 
        {!! Form::select('brand_name', $brand_name,null, array('class' => 'form-control')) !!}

我的控制器:

public function index()
{

 $category = Category::pluck('categoryName', 'id');
  $brand = Brand::pluck('brandName', 'id');


    return view ( 'site.indexS',compact('brand','category') );


}

如何填充另一个下拉列表?有什么想法吗?

【问题讨论】:

    标签: laravel dropdown


    【解决方案1】:

    您可以使用一点 ajax 和 get 方法轻松完成。可能是您尝试根据类别加载品牌让我们滚动:

    你的控制器:

    public function index()
    {
    
     $category = Category::pluck('categoryName', 'id');
    // no need to query brand here because we will load it depend on category 
      $brand = [];
    
    
        return view ( 'site.indexS',compact('brand','category') );
    
    
    }
    

    // 这里我们在你的控制器中添加另一个方法,它会根据类别 id 返回品牌对象

     public get_brand($categpry_id){
          // hope your brand table contain category_id or any name as you wish which act as foreign key
          $brands= Brand::where('category_id',$category_id)
          ->pluck('brandName','id');
          return json_encode($brands);
        }
    

    现在在路由中我们需要添加这个来点击这个 url:

    Route::get('get-brand','YourControllerName@get_brand');
    

    在视图中: {{-- 我正在为两个下拉列表添加 id --}} 类别:
    {!! Form::select('category', $category,null, array('id' => 'category_dropdown','class' => 'form- 控制')) !!}

      <label for="brand">Marque:</label> 
            {!! Form::select('brand_name', $brand_name,null, array('id' => 'brand_dropdown','class' => 'form-control')) !!}
    

    现在在我们的视图文件中我们需要使用 ajax,还有很多其他方式我更喜欢这里的 ajax

    <script type="text/javascript">
      var url = "{{url('/')}}";
    </script>
     <script type="text/javascript">
    
          $('#category_dropdown').on('change', function() {
            $('#brand_dropdown').empty();
    var id = $('#category_dropdown').val();
            $('#brand_dropdown').html('<option selected="selected" value="">Loading...</option>');
        var url = url + '/get-brand/'+id;
        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success:function(data) {
                //console.log(data);
                $('#brand_dropdown').html('<option selected="selected" value="">Select Brand</option>');
                $.each(data, function(key, value) {
    
                    $('#brand_dropdown').append('<option value="'+key+'">'+value+'</option>');
                });
    
            }
        });
          });
        </script>
    

    【讨论】:

    • 请注意拼写或变量名,希望对您有所帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-23
    • 2017-09-28
    相关资源
    最近更新 更多