Laravel6.x で非同期で動的な連動プルダウンリストを作成するには？

コントローラーからJSON化して返す場合とそのままDBのデータを取得して

テンプレートのjs内でJSON加工して表示する場合で、若干違いがあった

ので、まとめてみる(Φω｜

今回は、名目上はIE11以降サポートと聞いたが、それよりも古いPCも

動いているという情報を小耳にはさんだので、jQueryで、

csrf_tokenは最終的に対応するということで、とりあえずなしバージョンで

実装している。

[実装手順]

1. app/Http/Controllers/AjaxTestController#getUserLists()

public function getUserLists(Request $request)

{

// 連動元の親のプルダウンリストのkey

　 $deptCd = $request['dept_cd'];

$userLists = DB::table('tablename')->where('dept_cd', $deptCd)->get();

return $userLists;

}

2. routes/web.php

Route::post('/ajaxtest/getUserLists', 'AjaxTestController@getUserLists');

3. resources/views/ajaxtest/search.blade.php

※@section('content')の一番下に実装

<script type="text/javascript">

※onchangeに関数名を指定しない場合、以下で始めても可。-------

$('#deptCd').on('change', function() {

----------------------- ｺｺまで --------------------------------------------

function selectDeptUser() {

var data = { dept_cd: $('#deptCd').val() };

  $.ajax({

---------- もし、csrf_tokenを利用しているなら以下も必要。--------

headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')

},

---------------------------------- ｺｺまで --------------------------------

  type: 'POST',

url: '/ajaxtest/getDeptLists',

  data: data,

dataType: 'json',

})

.done(function(data) {

$('#userId option').remove();

$('#userId').append($("<option>").text("選択してください").attr('value',-1));

$.each(data,function(key,value) {

  value.name = value.name1 + ' ' + value.name2;

  $('#userId').append($("<option>").text(value.name).attr('value',value.user_id));

})

}),

.failure(function() {

console.log('It's failure!');

})

※例外処理のfinallyのように、エラーでもエラーでなくても通る処理が

　　あれば、下記で実装。

---------------------- ｺｺから --------------------------------------------------

.always(function(data,msg) {

})

------------------------ ｺｺまで -----------------------------------------------

}