Динамического населения выберите в раскрывающемся списке

Question

Я искал предыдущие ответы на ту же проблему, но ни один из них не помог мне так создать новый вопрос

Я пытаюсь заполнить второй выпадающий список в зависимости от значения списка первых выпадающего

ниже мой код

контроллер

<?php 

class ExprResultsController extends BaseController { 

    /* 
    |-------------------------------------------------------------------------- 
    | Default Home Controller 
    |-------------------------------------------------------------------------- 
    | 
    | You may wish to use controllers instead of, or in addition to, Closure 
    | based routes. That's great! Here is an example controller method to 
    | get you started. To route to this controller, just add the route: 
    | 
    | Route::get('/', 'HomeController@showWelcome'); 
    | 
    */ 

    public function bartExperRsltDwnld() 
    { 
     return View::make('hello'); 
    } 

     public function soExperRsltDwnldPg() 
    { 
      $tasks = Tasks::lists('taskname', 'id'); 
      return View::make('dashboard.admin.exprRslts.exprRsltsSo') 
        ->with('tasks', $tasks); 
    } 

     public function getExprIds($id) { 

     $exprs = Experiments::where('expertype', '=', $id)->lists('expername', 'id'); 
     /*$options = array(); 

     foreach ($exprs as $expr) { 
      $options += array($expr->id => $expr->expername); 
     }*/ 
     //Response::eloquent($exprs->get(array('id','name'))); 
     //return Response::json($options); 
     return $exprs; 

    } 

} 

Маршруты

Route::get('dropdowns/exprs/{id}', 'ExprResultsController@getExprIds'); 

клинка страница:

@extends('dashboard.dashboard_admin') 

@section('page-content') 
<div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="page-header"><i class="fa fa-archive fa-fw"></i> Download Experiment's Data</h1> 
    </div> 
    <div class="col-lg-12"> 
    {{ Form::open(array('url' => 'foo/bar')) }} 

     <div class="form-group"> 
      {{ Form::label('taskname', 'Tool/Task Name:') }}    
      {{ Form::select('expertype',array('default' => 'Please select one option') + $tasks,'default', array('id' => 'expertype')) }} 
     </div> 
     <div class="form-group"> 
      {{ Form::label('expername', 'Experiment Name:') }} 
      <select class="form-control" id="exprid" name="exprid" ></select> 

     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox">Disabled Checkbox 
      </label> 
     </div> 
     <div class="form-group"> 
      {{ Form::submit('Submit', array('class' => 'btn btn-success')) }} 
      <a href="{{URL::to('dashboard')}}" class="btn btn-danger">Cancel</a> 
     </div> 

    {{ Form::close() }} 
    </div> 
    <!-- /.col-lg-12 --> 
</div> 
<br> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <i class="fa fa-bell fa-fw"></i> Note 
     </div> 
     <!-- /.panel-heading --> 
     <div class="panel-body"> 
      <p>Current version only supports capability to download experiment data via excel spread 
      sheet. To download first select task type and then corresponding experiment. 
      Future versions will support advanced reporting framework.</p> 
     </div> 
     <!-- /.panel-body --> 
    </div> 
    <!-- /.panel --> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#expertype").change(function() { 

      $.getJSON("/dropdowns/exprs/",{ id : $("#expertype").val()}, function(data) { 

       var $exprid = $("#exprid"); 
       $exprid.empty(); 

       $.each(data, function(id, expername) {      
        $exprid.append('<option value="' + id +'">' + expername + '</option>'); 
       }); 
      $("#exprid").trigger("change"); /* trigger next drop down list not in the example */ 
      }); 
     }); 
    }); 
</script> 

@stop 

Пожалуйста, помогите мне найти то, что происходит не так. Когда я набираю маршрут в браузере, он показывает мне значения в БД, как это {"rbFkbjdmSt": "expr1"}

Я попытался установить предупреждение внутри $ ("# expertype"). Change (function() и он работает.Но когда я ставил предупреждение внутри $ .getJSON ("/ dropdowns/exprs /", {id: $ ("# expertype"). val()}, функция (данные) { ответа не было.

Спасибо заранее!

Answer 1

Аякса вызов не удается, потому что URL он просит не правильно. Ваш маршрут определяется искать идентификатор в качестве сегмента URL-адреса, но ваш Аякс вызова проходит идентификатор в в качестве параметра запроса. Таким образом, вместо запроса dropdowns/exprs/{id}, ваш запрос ajax запрашивает dropdowns/exprs/?id={id}. Это, в свою очередь, возвращает 404, и ваш обратный вызов успеха не вызывается.

Попробуйте это:

$.getJSON("/dropdowns/exprs/"+$("#expertype").val(), {}, function(data) { 
    console.log(data); 
}); 

Answer 2

1) Первый выпуск - методы контроллера:

Thy всегда помещает один символ верхнего регистра после HTTP глагола в методе:

Неправильный :public function getExprIds($id) {

Правильно:public function getExprids($id) {

2) Вы хотите, данные в формате JSON, можно создавать JSON данные:

public function getExprIds($id) { 

    $exprs = Experiments::where('expertype', '=', $id)->lists('expername', 'id'); 
    //Convert Illuminate collection to JSON 
    echo $exprs->toJson(); 

} 

3) Вы получаете данные в формате JSON, вы работаете с данными JSON:

$(document).ready(function() { 

    $("#expertype").on('change',function() { 
     //Expecting an id after '/exprs', as per your route configuration 
     $.getJSON("/dropdowns/exprs/"+$("#expertype").val(), function(data) { 

      var $exprid = $("#exprid"); 
      $exprid.empty(); 
      //We loop through rows of data 
      $.each(data, function(index, itemData) { 
       //Access to columns is as follows: itemData.ColumnName      
       $exprid.append('<option value="' + itemData.id +'">' + itemData.expername + '</option>'); 
      }); 
     $("#exprid").trigger("change"); /* trigger next drop down list not in the example */ 
     }); 
    }); 
});