How to make a dropdown list suggest only options in relation with a selected value?

Published 6 months ago by IT2704

In my form i have two dropdown lists the first one to choose "metier" and a second one to choose "tache" when i choose a "metier" i want that the second dropdown list "tache" suggest only options in relation with the already selected "Metier". Could anyone help me with this please.

create.blade.php

  @extends('Layouts/app')
  @extends('Layouts.master')
  @section('content')
  @if(count($errors))
  <link rel="stylesheet" 
 href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
 <div class="alert alert-danger" role="alert">
 <ul>
 @foreach($errors ->all() as $message)
 <li>{{$message}}</li>
    @endforeach
 </ul>
</div>
@endif
<div class="container">
<div class="row">
    <div class="col-md-10">
        <h1>Tarification tache</h1>
    <form action=" {{url ('tarification')  }}" method="post">
     {{csrf_field()}}

        <div class="form-group">
            <label for="technicien">Technicien</label>
            <select name="technicien_id" id="technicien" class="form-control" >

                    @foreach($techniciens as $techniciens)
                     <option value="{{ $techniciens->id }}">
                        {{$techniciens->id}}
                     </option>
                    @endforeach
            </select>
        </div>
 ////////////
        {{Form::open(array('url'=>'','files'=>true))}}
        <div class="form-group">
            <label for="metier">Libelle metier</label>
            <select name="metier" id="metier" class="form-control">

                    @foreach($metiers as $metier)
                     <option value="{{ $metier->id }}">
                        {{$metier->libelle_metier}}
                     </option>
                    @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="Tache">Libelle Tache</label>
            <select name="tache" id="Tache" class="form-control">

                    @foreach($taches as $tache)
                     <option value="{{ $tache->id }}">
                        {{$tache->libelle_tache}}
                     </option>
                    @endforeach
            </select>
        </div>
        {{Form::close()}}

//////////////
        <div class="form-group">
            <label for="">Tarif</label>
            <input type="text"  name ="Tarif" class="form-control"value="{{old('tarif')}}">
        </div>
        <div class="form-group">
            <input type="submit" value = "enregistrer" class="form-control btn btn-primary">
        </div>
    </form>
</div>
</div>


  <script>
  $('#metier').on('change',function(e){
    console.long(e);
    var met_id = e.target.value;

      $.get('/ajax-tac?met_id=' + met_id, function(data){
        $('#tache').empty();
        $.each(data,function(index, tacObj){
            $('#tache').append('<option value="'+tacObj.id+'">'+catObj.libelle_tache+'</option>');
        });

      });

      });
   </script>

   @endsection

route.php

   Route::get('/tarification', '[email protected]');
   Route::get('/tarification/create', '[email protected]');
   Route::post('/tarification', '[email protected]');
   Route::get('/tarification/{id}/edit', '[email protected]');
   Route::put('/tarification/{id}', '[email protected]');
   Route::delete('/tarification/{id}', '[email protected]');

    Route::get('/ajax-metier',function(){
    $met_id = Input::get('met_id');
    $taches = tache::where('metier_id','=', $met_id)->get();
    return Response::json($metiers);
});

controller

public function create()
{
$techniciens = technicien::orderBy('id','desc')->get();
$taches = Tache::orderBy('libelle_tache', 'asc')->get();
$metiers = Metier::all();
return view('tarification.create')->with('taches', $taches)->with('techniciens', $techniciens)-
>with('metiers', $metiers);
}

 /**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{
$tarification = new tarificationtache();

$tarification ->tache_id = $request->input('tache_id');
$tarification ->Tarif =$request->input('Tarif');
$tarification->save();
$tarification->techniciens()->attach($request->technicien_id);
return redirect('home');
}
s4muel
  • you have a route for ajax-metier Route::get('/ajax-metier',function(){...}) but in the create.blade.php file you do request the ajax-tac route: $.get('/ajax-tac?met_id=' \+ met_id, function(data){...})
  • and your html select element id is Tache <select name="tache" id="Tache" class="form-control"> but you use tache in the javascript $('#tache')

could that be a problem?

i used this JS library some time ago https://github.com/tuupola/jquery_chained, might help you clean things up a bit. have a look.

and you probably have a typo here: console.long(e);

s4muel

@IT2704 was it of any help?

Please sign in or create an account to participate in this conversation.