2016-12-11 3 views
0

Meine html ist wie folgt:Wie dynamisch Dropdown-Liste in Laravel 5.3?

<div class="form-group has-feedback{{ $errors->has('kdkotama') ? ' has-error' : '' }}"> 
    <select class="form-control" name="kdkotama" id="kdkotama"> 
     <option value="">---- Pilih Kotama----</option> 
     @foreach($tkotam as $tkotam) 
     <option value="{{$tkotam->kdkotama}}">{{$tkotam->nmkotama}}</option> 
     @endforeach 
    </select> 

    @if ($errors->has('kdkotama')) 
     <span class="help-block"> 
      <strong>{{ $errors->first('kdkotama') }}</strong> 
     </span> 
    @endif 
</div> 

<div class="form-group has-feedback{{ $errors->has('kdsatker') ? ' has-error' : '' }}"> 
    <select class="form-control" name="kdsatker"> 
     <option value="">---- Pilih Satker ----</option> 
    </select> 

    @if ($errors->has('kdsatker')) 
     <span class="help-block"> 
      <strong>{{ $errors->first('kdsatker') }}</strong> 
     </span> 
    @endif 
</div> 

Meine Javascript ist wie folgt:

<script> 
    $(document).ready(function() { 
     $("#kdkotama").change(function() { 
      console.log($("#kdkotama").val()); 
      $.getJSON("../dropdowns/satkers/" + $("#kdkotama").val(), function(data) { 
       var $satkers = $("#kdkotama"); 
       $satkers.empty(); 
       $.each(data, function(index, value) { 
        $satkers.append('<option value="' + index +'">' + value + '</option>'); 
       }); 
       $("#kdkotama").trigger("change"); /* trigger next drop down list not in the example */ 
      }); 
     }); 
    }); 
</script> 

Meine Strecken/web ist wie folgt:

Route::get('dropdowns/satkers/{id}', '[email protected]'); 

Mein Controller ist wie folgt:

<?php 

namespace App\Http\Controllers; 

use Illuminate\Http\Request; 
use App\Models\TSatkr 

class DropDownController extends Controller 
{ 
    public function getSatker($id) 
    { 
     $satkers = TSatkr::where('kdkotama', '=', $id)->get(); 
     $options = array(); 

     foreach ($satkers as $satker) { 
      $options += array($satker->kdsatkr => $satker->nmsatkr); 
     } 

     return Response::json($options); 
    } 
} 

Ich habe das hinzugefügt: console.log ($ ("# kdkotama"). val()); in Javascript. wenn ich kotama auswähle, erscheinen die Ergebnisse von console.log. In der Konsole ist es jedoch nicht gelungen, den Controller aufzurufen. während der Code, es sieht aus wie es ist korrekt

ist da jemand, der mir helfen kann?

+0

u dieses http sehen kann: // stackoverflow.com/questions/41081705/how-to-fix-dynamic-dropdown-list-with-ajax-error/41083021#41083021 – Borna

Antwort

0

Ich konfrontiert so viele Probleme, um dynamische Drop-Down zu generieren, aber jetzt mag ich das, das leistungsfähiger und nützlich ist, um dynamische Drop-Down-Wert einzustellen.

Lets DOM Methode erzeugen, die uns helfen können, dynamischen DOM mit einer Wahrheit oder Quelle zu erzeugen ..

//Controller/HelperController.php 
class HelperController 
{ 
    public static function ajaxDynamicDropDown($changeDropdown, $replaceDropdown, $url, $empty = []) { 
    $html = '<script type="text/javascript">'; 
    $html.='jQuery(document).ready(function($) {'; 
    $html.='jQuery("select[name=\'' . $change_dropdown . '\']").change(function(e){'; 
    $html.='jQuery.ajax({'; 
    $html.='type: "'.$action_type.'",'; 
    $html.='url: "' . $url . '",'; 
    $html.='dataType:"json",'; 
    $html.='data: jQuery(this).parents("form").find("input,select").not("[type=hidden][name^=_]").serialize(),'; 
    $html.='success:function(data){'; 
    $html.=' jQuery("select[name=\'' . $replace_dropdown . '\']").find("option:not(:first)").remove();'; 
    if (!empty($empty)) { 
     foreach ($empty as $key => $emt) { 
      $html.=' jQuery("select[name=\'' . $emt . '\']").find("option:not(:first)").remove();'; 
     } 
    } 
    $html.=' jQuery.each(data, function(key,value){'; 
    $html.='  jQuery("select[name=\'' . $replace_dropdown . '\']").append(\'<option value="\'+key+\'">\'+value+\'</option>\');'; 
    $html.='});'; 
    $html.='}'; 
    $html.='});'; 
    $html.='});'; 
    $html.='});'; 
    $html.='</script>'; 
    return $html; 
}  

}

Nutzen davon bin Ich muß nicht ändern Ereignis schreiben für jedes Dropdown. Es muss auch kein Trigger ausgelöst werden.

// Blade File: 

{!! Form::select('country_id',['1'=>'Test 1','2'=>'Test 2'],null,[]) !!} // First Dropdown with value 
{!! Form::select('state_id',[],null,[]) !!} // Second Dropdown will set based on first one. 

<script type="text/javascript"> 
{!! HelperController::ajaxDynamicDropDown('country_id','state_id',URL::to('ajax/states'),['state_id','city_id']) !!} 
</script> 

Jetzt werde ich implizite Route Controller verwenden. Damit erhalte ich Controller-Methoden, die auf dem HTTP-Anfragetyp und -namen basieren.

Mean in Ajax, wenn ich POST-Methode Anfrage dann in meinem Controller meine Methode Name wird wie postState() oder wenn GET-Anfrage dann gleich getState(). Für mehr klicken Sie bitte here

//routes.php 
Route::controller('ajax', 'AjaxController'); 

Hier Codebeispiel von AjaxController

// AjaxController.php 
class AjaxController 
{ 
    public function postState() 
    { 
    // of course here I get Input by using request()->get('input_name') 
     return ['1'=>'test']; 
    } 
} 

Sie können auch alten Wert gesetzt, wenn die Validierung mit altem falsch gehen() in AjaxController.

Sie können es auch für mehrere Abhängigkeiten verwenden wie Zustand, wenn von Land kam jetzt kann es möglich sein, die Sie benötigen Stadt bekommen von Staat gleiche Methode, die Sie dafür verwenden können ..