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.


  <link rel="stylesheet" 
 <script    src="">
 <div class="alert alert-danger" role="alert">
 @foreach($errors ->all() as $message)
<div class="container">
<div class="row">
    <div class="col-md-10">
        <h1>Tarification tache</h1>
    <form action=" {{url ('tarification')  }}" method="post">

        <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 }}">
        <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 }}">

        <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 }}">

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

    var met_id =;

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





   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]');

    $met_id = Input::get('met_id');
    $taches = tache::where('metier_id','=', $met_id)->get();
    return Response::json($metiers);


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');
return redirect('home');
  • 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, might help you clean things up a bit. have a look.

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


@IT2704 was it of any help?

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