質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

解決済

動的な絞り込み検索機能(都道府県→市区町村)の実装を行いたい

anusama
anusama

総合スコア13

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

2回答

0リアクション

1クリップ

560閲覧

投稿2019/03/10 07:58

編集2019/03/11 14:28

前提・実現したいこと

Laravelで都道府県選択ができる機能を作っています。
動的な絞り込み検索機能の実装につまづいております。

実現したいことは、
都道府県を選び、それに合った市区町村が選択できるようになることです。
例:「東京都」→「新宿区や港区など」 がプルダウンで選択可能

参考ソース:[JavaScript] 連動するセレクトボックス
参考:https://teratail.com/questions/22207

発生している問題・エラーメッセージ

下記のコードで試したところ、
都道府県のプルダウンは問題なく選択できるのですが、
市区町村のプルダウンが反応しません(選択もできず、市区町村の候補も表れません)

該当のソースコード

blade.phpの一部記載

php

<div class="form-group"> <script> var hoge = @json($prefectures); </script> {!! Form::label('storage_prefecture_id', '都道府県') !!} <select name="storage_prefecture_id" class="form-control col-md-6" id="storage_prefecture_id"> @foreach($prefectures as $prefecture) <option value="{{ $prefecture->id }}">{{ $prefecture->name }}</option> @endforeach </select> @if ($errors->has('storage_prefecture_id')) {!! Form::label('storage_prefecture_id', $errors->first('storage_prefecture_id')) !!} @endif </div> <div class="form-group"> <script> var foo = @json($cities); </script> {!! Form::label('storage_storage_city_id', '市区町村') !!} <select name="storage_city_id" class="form-control col-md-6" id="storage_city_id"> @foreach($cities as $city) <option value="{{ $city->id }}">{{ $city->name }}</option> @endforeach </select> @if ($errors->has('storage_city_id')) {!! Form::label('storage_city_id', $errors->first('storage_city_id')) !!} @endif </div>

app.jsの一部記載

js

var pref = hoge console.table(pref) var cit = foo console.table(cit) window.onload=function(){ for(var i=0; i<pref.length; i++){ let op = document.createElement("option"); op.value = pref[i].id; op.text = pref[i].name; document.getElementById("storage_prefecture_id").appendChild(op); } } function awake_pref(obj){ var targetPref; if(obj.value == "1"){ targetPref = cit; }else if(obj.value == "2"){ targetPref = cit; }else if(obj.value == "3"){ targetPref = cit;     |    中略(obj.value == "4"~"47"    | }else{ targetPref = new Array(); } var selObj = document.getElementById('storage_city_id'); while(selObj.lastChild){ selObj.removeChild(selObj.lastChild); } for(var i=0;i<targetPref.length;i++){ let op = document.createElement("option"); op.value = targetPref[i].id; op.text = targetPref[i].name; selObj.appendChild(op); } } var fuga = document.getElementById('storage_prefecture_id'); fuga.onchange = awake_pref(this);

DBには以下のようにデータが入っており、jsonで吐き出しております。
イメージ説明
イメージ説明

試したこと

多くの似たよなサンプルを探し、違うコードで試しましたが改善できませんでした。
プログラミング初学者のため、冗長かつ無駄なコードを書いており、
多分、prefecture_idを活用すべきだと思うのですが、行き詰まってしまいました。
一週間、色々試行錯誤しましたが一向に改善できないため、こちらの場でお力をお借りできればと思います。
お手数ですが、どうぞよろしくお願いいたします!

ご回答をいただき

このa, b, cはアロー関数を使用しない時、どのように扱えばよいのでしょうか。
また、書き方などに間違いがございましたら、ご指摘いただければ大変助かります。

js

const CREATE_OPTIONS = function(a, b) {  a.innerText = '', [['選択してください',''],...b].forEach(function(c) {   a.appendChild (new Option (...c)) }); } const GET_PREFECTURES = function(a) {  a.map(function(b) {   return [b.name, b.id] }); } const GET_CITIES = function(a, b) {  a.filter(function(c) {   return c.prefecture_id === b; }); } const SEARCH_ID = function(a) {  document.querySelector(a); } window.onload = function () {  CREATE_OPTIONS (SEARCH_ID ('#storage_prefecture_id'), GET_PREFECTURES(pref));  SEARCH_ID ('#storage_prefecture_id').onchange =   ({target:a}) => CREATE_OPTIONS(SEARCH_ID ('#storage_city_id'),GET_PREFECTURES(GET_CITIES(cit, parseInt(a.value,10)))); };

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。