Question

我在我的项目Materialize CSS框架，Ajax，Jquery和Laravel中使用了。我的目标是根据第一个选择下拉列表填充第二个多选下拉列表。

当前，通过使用Ajax和JQUERY，我开发了第二个多选下拉列表，但它可以作为普通的选择下拉列表使用（没有复选框，也无法选择更多的子类别）。

如果有人知道解决方案，我真的很合适。

createProduct.blade.php

@extends('layout')
@section('content')
  @if(count($errors) > 0) 
                 <div class="materialert warning" id="close-dialog">
                  <i class="material-icons">warning</i> 
                            <span>   
                                @foreach($errors ->all() as $error)
                                      <ul>
                                          <li>{{$error}}</li>
                                      </ul>         
                                @endforeach 
                           </span>
               </div>
          @endif 



  {!! Form::open(['action' => 'MainController@storeProduct', 'method' => 'POST', 'files' => true]) !!}

          <div class="form-group">
            {{Form::label('title', 'Title')}}
            {{Form::text('naslov', '', ['id' => 'inputname', 'class' => ($errors->has('naslov')) ? 'form-control is-invalid' : 'form-control',  'placeholder' => 'Unesite naslov'])}}
          </div>  

          <div class="form-group">
            {{Form::label('copyright', 'Alt text')}}
            {{Form::text('copyright', '', ['id' => 'copyright', 'class' => ($errors->has('copyright')) ? 'form-control is-invalid' : 'form-control',  'placeholder' => 'Unesite Autorska prava'])}}
          </div> 

              <div class="form-group">
            {{Form::label('description', 'Description')}}
            {{Form::text('description', '', ['id' => 'inputname', 'class' => ($errors->has('description')) ? 'form-control is-invalid' : 'form-control',  'placeholder' => 'Unesite Description'])}}
          </div>  

          <div class="form-group">
            {{Form::label('content', 'Description')}}
            {{Form::textarea('sadržaj', '', ['id' => 'inputtext', 'class' => ($errors->has('sadržaj')) ? 'form-control is-invalid' : 'form-control',  'placeholder' => 'Unesite sadržaj'])}}
          </div> 
          <!-- Write your comments here 
          <div class="form-group">
            {{Form::label('file', 'Izaberi fajl')}}
            {{    Form::file('file') }}
           </div>  
        --> 

          <div class="form-group">
            <div id="upload-demo"></div>
              {{Form::label('slika', 'Izaberi sliku')}}
              {{Form::file('slika')}}
           </div>

          <div class="input-field">
              {{Form::label('Category', 'Izaberi  menu category')}}
              <br>
              {{ Form::select('category', $category, null, ['class' => 'form-control']) }}
          </div>
           <div class="input-field">
              {{Form::label('Subcategory', 'Izaberi menu subcategory')}}
              <br>
              {{ Form::select('subcategory[]',$subcategory2, ['class' => 'form-control', 'multiple' => true]) }}


          </div>
           <div class="input-field">
              {{Form::label('Category', 'Izaberi menu second subcategory')}}
              <br>
              {{ Form::select('secondsubcategory', $secondsubcategory, null, ['class' => 'form-control']) }}
          </div>  

          <div class="form-group">
            {{Form::label('datum', 'Izaberi datum')}}
            {{ Form::text('datum', null, ['class' => 'form-control', 'id'=>'datepicker']) }}
          </div>

          <br>
          <br>
          {{Form::submit('Prihvati', ['class' => 'blog-button btn']) }}
          <a href="{{URL::route('adminpanel')}}"  class="blog-button btn">Admin Panel</a>
          {!! Form::close() !!}



@endsection

web.php

//routes for products
Route::get('/createproduct', 'MainController@createProduct')->name('product.create');
Route::post('/createproduct', 'MainController@storeProduct')->name('product.store');

Route::get('createproduct/getsubcategories/{id}','MainController@getSubcategories')->name('proba');

style.js

 jQuery(document).ready(function ()
    {
            jQuery('select[name="category"]').on('change',function(){
               var countryID = jQuery(this).val();

               if(countryID)
               {
                  jQuery.ajax({
                     url : 'createproduct/getsubcategories/' +countryID,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                       $(document).ready(function() {
   $('select[name="subcategory[]"]').formSelect();
    });
                        console.log(data);
                        jQuery('select[name="subcategory[]"]').empty();
                        jQuery.each(data, function(key,value){

      $('select[name="subcategory[]"]').append('<option value="'+ key +'">'+ value +'</option>');


                        });
                     }
                  });
               }
               else
               {
                  $('select[name="subcategory"]').empty();
               }
            });
    });

mainControler.php

public function createProduct()
    {

      $category = Category::with('firstsubcategories')->get();
    $final=[];
      foreach($category as $a)
{
$proba=$a->id;
$b=$a->firstsubcategories;
$final[]=$b->where('category_id', '=', $proba)->pluck('title', 'id');

}


        $category = Category::pluck('title', 'id');
        $subcategory2 = [];
        $secondsubcategory = SecondSubCategory::pluck('title', 'id');  
 return view('products/createProduct', ['category'=>$category, 'subcategory2'=>$subcategory2, 'secondsubcategory'=>$secondsubcategory,  'final'=>$final]);

    }
public function getSubcategories($id){


       $subcategory2 = SubCategory::where('category_id', '=', $id)->pluck('title', 'id');

 return json_encode($subcategory2);

}

在动态实现多个选择中使用复选框显示所有值

0 个答案: