如何在 laravel 5.3 中动态下拉列表？

Question

我的html是这样的：

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

我的 javascript 是这样的：

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

我的路线/网络是这样的：

Route::get('dropdowns/satkers/{id}', 'DropDownController@getSatkers');

我的控制器是这样的：

<?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);
    }
}

我在 javascript 中添加了这个：console.log ($ ("# kdkotama"). val ());。当我选择 kotama 时，会出现 console.log 的结果。但是在控制台中，它没有成功调用控制器。而代码，看起来是正确的

有人可以帮我吗？

Answer 1

我在生成动态下拉列表时遇到了很多问题，但现在我喜欢这个，它对设置动态下拉值更强大和有用。

让我们使用可以帮助我们生成具有一个事实或来源的动态 DOM 的方法来生成 DOM..

//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;
}    

}

这样做的好处是我不必为每个下拉菜单编写更改事件。也不需要触发。

// 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>

现在我将使用隐式路由控制器。使用它，我可以根据 HTTP 请求类型和名称获取控制器方法。

如果我使用 POST 方法请求，则在 ajax 中的意思是，然后在我的控制器中，我的方法名称将类似于 postState() 或者如果 GET 请求则相同的 getState()。更多请点击here

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

这里是 AjaxController 的代码示例

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

您还可以在 AjaxController 中使用 old() 验证失败时设置旧值。

如果来自国家/地区，您也可以将它用于多个依赖项，例如州，现在您可能需要从州获得城市，您可以使用相同的方法..