title: Dynamic Dependend dropdown using jQuery ajax in laravel 5.4
body: <blockquote>
    <p>I want to make this dropdown list ,first drop-down is showing ,but
    when i select an item inside from it another dropdown is not coming.</p>
    
    <p>medicinecost.blade.page</p>
  </blockquote>
  
  <pre><code> &lt;body&gt;
          &lt;h1&gt;&lt;p&gt;Lab Cost&lt;/p&gt;&lt;/h1&gt;&lt;br&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-lg-3"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;select name="labCat" id="labC" class="form-control"&gt;
                          &lt;option value="0" disabled="true" selected="true"&gt;Select Lab Category&lt;/option&gt;
                              @if(isset($lab_category))
                                  @foreach($lab_category as $lb)
                                      &lt;option value="{{$lb-&gt;lab_category_id}}"&gt;{{$lb-&gt;category_name}}&lt;/option&gt;
                                  @endforeach
                              @endif
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;select name="labSub" id="labS" class="form-control"&gt;
                          &lt;option value="0" disabled="true" selected="true"&gt;Select Lab Sub Category&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;select name="labTest" id="labT" class="form-control"&gt;
                          &lt;option value="0" disabled="true" selected="true"&gt;Select Lab Test&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
          $('#labC').on('change',function () {
              console.log();
              var labCategID = $(this).val();
                  $.get('/json-labC?lab_category_id='+labCategID,function (data) {
                      console.log(data);
                      if(labCategID){
                          $('#labS').empty();
                          $('#labS').append('&lt;option value="0" disabled="true" selected="true"&gt;Select Lab Sub Category&lt;/option&gt;');
                          $('#labT').empty();
                          $('#labT').append(' &lt;option value="0" disabled="true" selected="true"&gt;Select Lab Test&lt;/option&gt;');
                          $.each(data,function(index,labSObj){
                              $('#labS').append('&lt;option value="'+labSObj.id+'"&gt;'+labSObj.lab_sub_category+'&lt;/option&gt;');
                          });
                      }else{
                          $('#labS').empty();
                      }
                  });
          });
          &lt;/script&gt;
          &lt;/body&gt;
  </code></pre>
  
  <blockquote>
    <p>web.php</p>
  </blockquote>
  
  <pre><code>  Route::get('labdetails','Test@cost');
      Route::get('/json-labC','Test@costSub');
  </code></pre>
  
  <blockquote>
    <p>controller Test.php</p>
  </blockquote>
  
  <p>class Test extends Controller
      {
              public function cost(Request $request){
                  $lab_data = \DB::table('lab_category')->select('lab_category_id','category_name')->get();
                  return view('pages/medicinecost')->with('lab_category',$lab_data);
              }</p>
  
  <pre><code>        public function costSub(Request $request,$labcatID){
              $lab_sub_data = \DB::table('lab_sub_category')-&gt;where('category_id',1)-&gt;select('sub_category_name')-&gt;get();
              //dd($lab_sub_data);
              return response()-&gt;json($lab_sub_data);
          }
  </code></pre>
  
  <blockquote>
    <p>I am getting below error in browsers inspect element.</p>
  </blockquote>
  
  <pre><code>jquery.min.js:2 GET http://127.0.0.1:8000/json-labC?lab_category_id=4 500 (Internal Server Error)
  </code></pre>