title: How to implement dynamic dependent multiple dropdown in Laravel
body: <p>I have Table called predictions with columns Currorg1,Currorg2,Currorg3,Currorg4,Currorg5 now I am getting all these values in multi select dropdown. I want to implement dynamic dropdown i.e. when I select Currorg1 then all the values in Currorg2 must load values dependent on Currorg1 selection.</p>
  <p>For e.g. this is my table
  | Curr0rg1 | Currorg2 |
  | -------- | ---------|
  | First    | row1     |
  | Second   | row2     |
  | First    | row3     |
  | First    | row4     |
  | Second   | row 5    |</p>
  <p>Now when First is selected it should display row1,row3,row4 in Currorg2 dropdown and so on.
  I have followed this tutorial: <a href="https://www.webslesson.info/2018/03/ajax-dynamic-dependent-dropdown-in-laravel.html" rel="nofollow noreferrer">https://www.webslesson.info/2018/03/ajax-dynamic-dependent-dropdown-in-laravel.html</a> but not sure what I am doing wrong.</p>
  <p>Here is my controller:</p>
  <pre><code> public function index(Request $request,ExportDataTable $dataTable)
      {
          if(request()-&gt;ajax())
          {
              if(!empty($request-&gt;BusinessUnit) || !empty($request-&gt;CurrOrg1)  || !empty($request-&gt;CurrOrg2)  || !empty($request-&gt;Role)  || !empty($request-&gt;Region)  || !empty($request-&gt;ProfessionalClassification)  || !empty($request-&gt;Gender)  || !empty($request-&gt;CurrOrg3)  || !empty($request-&gt;CurrOrg4)  || !empty($request-&gt;CurrOrg5) || !empty($request-&gt;L6) || !empty($request-&gt;L7) || !empty($request-&gt;Account))
              {             
                  $loged_user =Auth::user();
                  $user= DB:: table('users')
                      -&gt;selectRaw('users.*, REPLACE(Org2, &quot;Admin&quot;, &quot;&quot;) AS ROrg2, REPLACE(Org1, &quot;Admin&quot;, &quot;&quot;) AS ROrg1, REPLACE(Org3, &quot;Admin&quot; , &quot;&quot;) AS ROrg3')
                      -&gt;where('email',$loged_user-&gt;email)
                      -&gt;first();
                  $query= DB:: table('predictions')
                          -&gt;where('CurrOrg1','like','%'.$user-&gt;ROrg1.'%')
                          -&gt;where('CurrOrg2','like','%'.$user-&gt;ROrg2.'%')
                          -&gt;where('CurrOrg3','like','%'.$user-&gt;ROrg3.'%')
                          -&gt;select('predictions.id','predictions.EmployeeNumber','predictions.Role','predictions.Region','predictions.CurrOrg1','predictions.CurrOrg2','predictions.RiskZone','predictions.Probablity','predictions.Rating','predictions.Feedback','predictions.Gender','predictions.CurrOrg3','predictions.CurrOrg4','predictions.CurrOrg5','predictions.ProfessionalClassification','predictions.Local_Expat','predictions.EmployeeRoleSeniority','predictions.FeedRisklevel','predictions.Feedinfluencers','predictions.Action','predictions.Fname','predictions.Lname','predictions.Avgweekhr','predictions.Account','predictions.L6','predictions.L7');
                          
                  if(!empty($request-&gt;CurrOrg2)) {
                      $query-&gt;whereIn('CurrOrg2',$request-&gt;CurrOrg2);
                  }
  
                  if(!empty($request-&gt;Region)) {
                       $query-&gt;whereIn('Region',$request-&gt;Region);
                  }
  
                  if(!empty($request-&gt;ProfessionalClassification)) {
                       $query-&gt;whereIn('ProfessionalClassification',$request-&gt;ProfessionalClassification);
                  }
                  if(!empty($request-&gt;CurrOrg1)) {
                      $query-&gt;whereIn('CurrOrg1',$request-&gt;CurrOrg1);
                  }
                  if(!empty($request-&gt;CurrOrg3)) {
                       $query-&gt;whereIn('CurrOrg3',$request-&gt;CurrOrg3);
                  }
                  if(!empty($request-&gt;CurrOrg4)) {
                       $query-&gt;whereIn('CurrOrg4',$request-&gt;CurrOrg4);
                  }
                  if(!empty($request-&gt;CurrOrg5)) {
                       $query-&gt;whereIn('CurrOrg5',$request-&gt;CurrOrg5);
                  }
                  if(!empty($request-&gt;Role)) {
                      $query-&gt;whereIn('Role',$request-&gt;Role);
                  }
                  if(!empty($request-&gt;BusinessUnit)) {
                      $query-&gt;whereIn('BusinessUnit',$request-&gt;BusinessUnit);
                  }
                  if(!empty($request-&gt;Gender)) {
                       $query-&gt;whereIn('Gender',$request-&gt;Gender);
                  }
                  if(!empty($request-&gt;L6)) {
                       $query-&gt;whereIn('L6',$request-&gt;L6);
                  }
                  if(!empty($request-&gt;L7)) {
                       $query-&gt;whereIn('L7',$request-&gt;L7);
                  }
                  if(!empty($request-&gt;Account)) {
                       $query-&gt;whereIn('Account',$request-&gt;Account);
                  }
                  $data = $query-&gt;get(); 
  
              }  
  
              else
              {
                  $loged_user =Auth::user();
                  $user= DB:: table('users')
                      -&gt;selectRaw('users.*, REPLACE(Org2, &quot;Admin&quot;, &quot;&quot;) AS ROrg2, REPLACE(Org1, &quot;Admin&quot;, &quot;&quot;) AS ROrg1, REPLACE(Org3, &quot;Admin&quot; , &quot;&quot;) AS ROrg3')
                      -&gt;where('email',$loged_user-&gt;email)
                      -&gt;first();
                  $data1 =DB:: table('predictions')
                          -&gt;where('CurrOrg1','like','%'.$user-&gt;ROrg1.'%')
                          -&gt;where('CurrOrg2','like','%'.$user-&gt;ROrg2.'%')
                          -&gt;where('CurrOrg3','like','%'.$user-&gt;ROrg3.'%')
                          -&gt;select('predictions.id','predictions.EmployeeNumber','predictions.Role','predictions.Region','predictions.CurrOrg1','predictions.CurrOrg2','predictions.RiskZone','predictions.Probablity','predictions.Rating','predictions.Feedback','predictions.Gender','predictions.CurrOrg3','predictions.CurrOrg4','predictions.CurrOrg5','predictions.ProfessionalClassification','predictions.Local_Expat','predictions.EmployeeRoleSeniority','predictions.FeedRisklevel','predictions.Feedinfluencers','predictions.Action','predictions.Fname','predictions.Lname','predictions.Avgweekhr','predictions.Account','predictions.L6','predictions.L7');
                         
                  $data = $data1-&gt;get();   
                  
                  }
                  
               
              return datatables()-&gt;of($data)
              -&gt;addColumn('Feedback', function($data)
              {   
                  if($data-&gt;Action == 'No' || is_null($data-&gt;Action))
                  {
                  return &quot;&lt;a href='#' style='background-color:#CA0088;color:#fff' class='btn btn-sm Feedback' id='&quot;.$data-&gt;id.&quot;'&gt;Feedback&lt;/a&gt;&quot;;
                  }
                  else
                     {
                       return &quot;&lt;a href='#' style='background-color:#00A300;color:#fff' class='btn btn-sm Feedback' id='&quot;.$data-&gt;id.&quot;'&gt;Feedback&lt;/a&gt;&quot;;
                     } 
              })
              -&gt;escapeColumns([])
              -&gt;make(true);
  
          }
          $Business_unit_name = DB::table('predictions')
                              -&gt;select('BusinessUnit')
                              -&gt;groupBy('BusinessUnit')
                              -&gt;orderBy('BusinessUnit', 'ASC')
                              -&gt;get();
          $CurrOrg1_name = DB::table('predictions')
                              -&gt;select('CurrOrg1')
                              -&gt;groupBy('CurrOrg1')
                              -&gt;orderBy('CurrOrg1', 'ASC')
                              -&gt;get();
          $CurrOrg2_name = DB::table('predictions')
                              -&gt;select('CurrOrg2')
                              -&gt;groupBy('CurrOrg2')
                              -&gt;orderBy('CurrOrg2', 'ASC')
                              -&gt;get();
          $CurrOrg3_name = DB::table('predictions')
                              -&gt;select('CurrOrg3')
                              -&gt;groupBy('CurrOrg3')
                              -&gt;orderBy('CurrOrg3', 'ASC')
                              -&gt;get();
          $CurrOrg4_name = DB::table('predictions')
                              -&gt;select('CurrOrg4')
                              -&gt;groupBy('CurrOrg4')
                              -&gt;orderBy('CurrOrg4', 'ASC')
                              -&gt;get();
          $CurrOrg5_name = DB::table('predictions')
                              -&gt;select('CurrOrg5')
                              -&gt;groupBy('CurrOrg5')
                              -&gt;orderBy('CurrOrg5', 'ASC')
                              -&gt;get();
          $Role_name = DB::table('predictions')
                              -&gt;select('Role')
                              -&gt;groupBy('Role')
                              -&gt;orderBy('Role', 'ASC')
                              -&gt;get();
          $Region_name = DB::table('predictions')
                              -&gt;select('Region')
                              -&gt;groupBy('Region')
                              -&gt;orderBy('Region', 'ASC')
                              -&gt;get();
          $Gender_name = DB::table('predictions')
                              -&gt;select('Gender')
                              -&gt;groupBy('Gender')
                              -&gt;orderBy('Gender', 'ASC')
                              -&gt;get();
          $ProfessionalClassification_name = DB::table('predictions')
                              -&gt;select('ProfessionalClassification')
                              -&gt;groupBy('ProfessionalClassification')
                              -&gt;orderBy('ProfessionalClassification', 'ASC')
                              -&gt;get();
          $Prediction= new Prediction;
          $Prediction_list= $Prediction::all();
          $Topcorrelators = DB::table('predictions')
                              -&gt;select('Topcorrelators')
                              -&gt;groupBy('Topcorrelators')
                              -&gt;orderBy('Topcorrelators', 'ASC')
                              -&gt;get();
                 
          $L6_name = DB::table('predictions')
                    -&gt;select('L6')
                    -&gt;groupBy('L6')
                    -&gt;orderBy('L6','ASC')
                    -&gt;get();
          $L7_name = DB::table('predictions')
                    -&gt;select('L7')
                    -&gt;groupBy('L7')
                    -&gt;orderBy('L7','ASC')
                    -&gt;get();
          $Account_name = DB::table('predictions')
                    -&gt;select('Account')
                    -&gt;groupBy('Account')
                    -&gt;orderBy('Account','ASC')
                    -&gt;get();
              
  
          return view('admin.members.Predictions', compact('Business_unit_name','CurrOrg1_name','CurrOrg2_name','CurrOrg3_name','CurrOrg4_name','CurrOrg5_name','Role_name','Region_name','Gender_name','Topcorrelators','ProfessionalClassification_name','Prediction_list','L6_name','L7_name','Account_name'));
  
  
  }
      /**
       * Show the form for creating a new resource.
       *
       * @return \Illuminate\Http\Response
       */
       function fetch(Request $request)
      {
       $select = $request-&gt;get('select');
       $value = $request-&gt;get('value');
       $dependent = $request-&gt;get('dependent');
       $data = DB::table('predictions')
         -&gt;where($select, $value)
         -&gt;groupBy($dependent)
         -&gt;get();
       $output = '&lt;option value=&quot;&quot;&gt;Select '.ucfirst($dependent).'&lt;/option&gt;';
       foreach($data as $row)
       {
        $output .= '&lt;option value=&quot;'.$row-&gt;$dependent.'&quot;&gt;'.$row-&gt;$dependent.'&lt;/option&gt;';
       }
       echo $output;
      }
  </code></pre>
  <p>This is my script:</p>
  <pre><code> $('.dynamic').change(function(){
    if($(this).val() != '')
    {
     var select = $(this).attr(&quot;id&quot;);
     var value = $(this).val();
     var dependent = $(this).data('dependent');
     var _token = $('input[name=&quot;_token&quot;]').val();
     $.ajax({
      url:&quot;{{ route('dynamic_dependent') }}&quot;,
      method:&quot;POST&quot;,
      data:{select:select, value:value, _token:_token, dependent:dependent},
      success:function(result)
      {
       $('#'+dependent).html(result);
      }
  
     })
    }
   });
  
   $('#CurrOrg1').change(function(){
    $('#CurrOrg2').val('');
    $('#CurrOrg3').val('');
   });
  
   $('#CurrOrg2').change(function(){
    $('#CurrOrg3').val('');
   });
  </code></pre>
  <p>This is my view:</p>
  <pre><code>        &lt;div class=&quot;form-group&quot; style=&quot;margin-right: 10px&quot;&gt;
              
  
        &lt;select name=&quot;CurrOrg1[]&quot; id=&quot;CurrOrg1&quot; multiple class=&quot;form-control input-lg dynamic&quot; data-dependent=&quot;CurrOrg2&quot;&gt;
       @foreach($CurrOrg1_name as $org1)
          &lt;option value=&quot;{{ $org1-&gt;CurrOrg1 }}&quot;&gt;{{ $org1-&gt;CurrOrg1 }}&lt;/option&gt;
          @endforeach
      &lt;/select&gt;       
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;select name=&quot;CurrOrg2[]&quot; id=&quot;CurrOrg2&quot; multiple class=&quot;form-control input-lg dynamic&quot; data-dependent=&quot;CurrOrg3&quot;&gt;
          &lt;option value=&quot;&quot;&gt;Select Org2&lt;/option&gt;
        &lt;/select&gt;       
    &lt;/div&gt;
      &lt;div class=&quot;form-group&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;select name=&quot;CurrOrg3[]&quot; id=&quot;CurrOrg3&quot; multiple class=&quot;form-control&quot;&gt;
          
          &lt;option value=&quot;&quot;&gt;Select Org3&lt;/option&gt;
         
        &lt;/select&gt;       
    &lt;/div&gt;
    {{ csrf_field() }}
  </code></pre>
  <p>Can someone suggest what I am doing wrong here?</p>