前提・実現したいこと
Laravelで都道府県選択ができる機能を作っています。
動的な絞り込み検索機能の実装につまづいております。
実現したいことは、
都道府県を選び、それに合った市区町村が選択できるようになることです。
例:「東京都」→「新宿区や港区など」 がプルダウンで選択可能
参考ソース:[JavaScript] 連動するセレクトボックス
参考:https://teratail.com/questions/22207
発生している問題・エラーメッセージ
下記のコードで試したところ、
都道府県のプルダウンは問題なく選択できるのですが、
市区町村のプルダウンが反応しません(選択もできず、市区町村の候補も表れません)
該当のソースコード
blade.phpの一部記載
php
1 <div class="form-group"> 2 <script> 3 var hoge = @json($prefectures); 4 </script> 5 6 {!! Form::label('storage_prefecture_id', '都道府県') !!} 7 <select name="storage_prefecture_id" class="form-control col-md-6" id="storage_prefecture_id"> 8 @foreach($prefectures as $prefecture) 9 <option value="{{ $prefecture->id }}">{{ $prefecture->name }}</option> 10 @endforeach 11 </select> 12 13 @if ($errors->has('storage_prefecture_id')) 14 {!! Form::label('storage_prefecture_id', $errors->first('storage_prefecture_id')) !!} 15 @endif 16 </div> 17 18 <div class="form-group"> 19 <script> 20 var foo = @json($cities); 21 </script> 22 23 {!! Form::label('storage_storage_city_id', '市区町村') !!} 24 <select name="storage_city_id" class="form-control col-md-6" id="storage_city_id"> 25 @foreach($cities as $city) 26 <option value="{{ $city->id }}">{{ $city->name }}</option> 27 @endforeach 28 </select> 29 30 @if ($errors->has('storage_city_id')) 31 {!! Form::label('storage_city_id', $errors->first('storage_city_id')) !!} 32 @endif 33 </div>
app.jsの一部記載
js
1var pref = hoge 2console.table(pref) 3 4var cit = foo 5console.table(cit) 6 7 8window.onload=function(){ 9 for(var i=0; i<pref.length; i++){ 10 let op = document.createElement("option"); 11 op.value = pref[i].id; 12 op.text = pref[i].name; 13 document.getElementById("storage_prefecture_id").appendChild(op); 14 } 15} 16 17function awake_pref(obj){ 18 var targetPref; 19 if(obj.value == "1"){ 20 targetPref = cit; 21 }else if(obj.value == "2"){ 22 targetPref = cit; 23 }else if(obj.value == "3"){ 24 targetPref = cit; 25 | 26 中略(obj.value == "4"~"47") 27 | 28 }else{ 29 targetPref = new Array(); 30 } 31 var selObj = document.getElementById('storage_city_id'); 32 while(selObj.lastChild){ 33 selObj.removeChild(selObj.lastChild); 34 } 35 for(var i=0;i<targetPref.length;i++){ 36 let op = document.createElement("option"); 37 op.value = targetPref[i].id; 38 op.text = targetPref[i].name; 39 selObj.appendChild(op); 40 } 41} 42 43var fuga = document.getElementById('storage_prefecture_id'); 44fuga.onchange = awake_pref(this);
DBには以下のようにデータが入っており、jsonで吐き出しております。
試したこと
多くの似たよなサンプルを探し、違うコードで試しましたが改善できませんでした。
プログラミング初学者のため、冗長かつ無駄なコードを書いており、
多分、prefecture_id
を活用すべきだと思うのですが、行き詰まってしまいました。
一週間、色々試行錯誤しましたが一向に改善できないため、こちらの場でお力をお借りできればと思います。
お手数ですが、どうぞよろしくお願いいたします!
ご回答をいただき
このa, b, c
はアロー関数を使用しない時、どのように扱えばよいのでしょうか。
また、書き方などに間違いがございましたら、ご指摘いただければ大変助かります。
js
1const CREATE_OPTIONS = function(a, b) { 2 a.innerText = '', [['選択してください',''],...b].forEach(function(c) { 3 a.appendChild (new Option (...c)) 4}); 5} 6const GET_PREFECTURES = function(a) { 7 a.map(function(b) { 8 return [b.name, b.id] 9}); 10} 11const GET_CITIES = function(a, b) { 12 a.filter(function(c) { 13 return c.prefecture_id === b; 14}); 15} 16const SEARCH_ID = function(a) { 17 document.querySelector(a); 18} 19 20window.onload = function () { 21 CREATE_OPTIONS (SEARCH_ID ('#storage_prefecture_id'), GET_PREFECTURES(pref)); 22 SEARCH_ID ('#storage_prefecture_id').onchange = 23 ({target:a}) => CREATE_OPTIONS(SEARCH_ID ('#storage_city_id'),GET_PREFECTURES(GET_CITIES(cit, parseInt(a.value,10)))); 24};
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。