頭文字→大学→学部を選択する入力フォームの作り方

質問

プログラミング初心者です。
頭文字を選択するとその頭文字から始まる大学が選択でき、大学を選択するとその大学に所属する学部を選択できるような登録フォームを作りたいです。
ちょうどリクナビの登録フォーム（https://job.rikunabi.com/2015/accounts/regist/）と同じような感じです。
検索してもなかなか役に立ちそうなページにたどり着けず、どのように作ったらいいのか全く分かりません。どなたか知恵をお貸しください。
ちなみにPHP（フレームワークはLaravel）、SQLiteで開発中です。
回答宜しくお願いします。

回答No.1

superside0 · ベストアンサー

どのような画面推移となる設計になるか次第ですが、

頭文字選択　
↓
次画面で大学選択
↓
次画面で学部選択

という画面推移なら、それぞれの画面のPHPでは
フォームから来た値を使ってDBから検索し　次のフォームを作る
といった処理で可能です。

ただ１つの画面で、
頭文字を入れるテキストフォームや、大学名や学部名のセレクタが並んでいて
あるフォームの値で　ダイナミックに（画面の推移なしに）　セレクタの内容を変化させたいなら
サーバー再度で動くPHP等のCGIでなく、ブラウザ上で動くJavaScriptで作るのが　一般的です。

要は
　頭文字のテキストフォームに入力された値が変化したイベントで　大学名のセレクタの選択肢を絞り込む
　大学名の選択が変化したイベントで、学部名のセレクタの選択肢をその大学用に変更
というイベント処理をJavaScriptで作ればよいことになります。

よって、調べるのであればPHPでなく、JavaScriptということになります。

なお　各大学名の学部情報を全てJacvaScriptの変数に予め埋め込むと
通信データ量が肥大になったり、ブラウザでの負荷が高くなるということが予測されるなら、
Ajaxを使うのが、よいと思われます。
この場合、大学名（ないしは大学コード）を受け取って、学部名をリスト化して
XMLデータにして返す部分を、PHP等でプログラムすることになります。

お礼

なるほど。Ajaxを使うことになりそうです。
丁寧な回答ありがとうございました！

回答No.2

Ogre7077

複数の画面に分けるなら PHP の範疇ですが、一つの画面だけで入力させるなら必然的に JavaScript だけで解決することになります。
「連動 プルダウン jQuery」で検索するといろいろ見つかりますが、そんなに難しいスクリプトでもないので、挙動などを拘りたいなら自作もありでしょう。

こんな感じで

<script>
function interlockOptions(clazz) {
__ var context = {};
__ var listener = function(ev){
__ __ var elem = ev.target;
__ __ while (elem) {
__ __ __ var name = elem.getAttribute('data-gear-name');
__ __ __ if (!name) break;
__ __ __ var sopt = elem.options[elem.selectedIndex];
__ __ __ var expr = sopt? sopt.getAttribute('data-gear-value'): null;
__ __ __ var vals = expr? expr.split(' '): null;
__ __ __ var ctrl = context[name].select;
__ __ __ context[name].opts.forEach(function(o){
__ __ __ __ if (o.value == '') { o.selected = true; return } // 無選択を特別あつかい
__ __ __ __ var f = !vals || vals.some(function(v){return v == o.value});
__ __ __ __ if (ctrl.contains(o)) ctrl.removeChild(o);
__ __ __ __ if (f) ctrl.appendChild(o);
__ __ __ });
__ __ __ elem = ctrl;
__ __ }
__ };
__ var sels = document.querySelectorAll('select.' + clazz);
__ [].forEach.call(sels, function(element){
__ __ context[element.name] = {select:element, opts:[].slice.apply(element.options)};
__ __ element.addEventListener('change', listener, false);
__ });
}
addEventListener('load', function(){
__ interlockOptions('interlock')
}, false)
</script>

<form>
<dl>
<dt>capital<dd>
<select name=cl class=interlock data-gear-name=uv>
<option value=>-
<option value=a data-gear-value="ara arr ars">A
<option value=b data-gear-value="bay bak bbb">B
<option value=c data-gear-value="cam cut cit">C
</select>
<dt>university<dd>
<select name=uv class=interlock data-gear-name=de>
<option value=>-
<option value=ara data-gear-value="lit law eco irs">あらあら大学
<option value=arr data-gear-value="lit eco">あららぎ大学
<option value=ars data-gear-value="eco sci">あらし大学
<option value=bay data-gear-value="sci eng med">ばよえん大学
<option value=bak data-gear-value="lit law eco irs sci eng med">ばかだ大学
<option value=bbb data-gear-value="eng">びびび大学
<option value=cam data-gear-value="lit eco">きゃめる大学
<option value=cut data-gear-value="irs med">きっとかっと大学
<option value=cit data-gear-value="sci eng">きてれつ大学
</select>
<dt>department<dd>
<select name=de class=interlock>
<option value=>-
<option value=lit>文学部
<option value=law>法学部
<option value=eco>経済学部
<option value=irs>国際関係学部
<option value=sci>理学部
<option value=eng>工学部
<option value=med>医学部
</select>
</dl></form>

お礼

わざわざコードまで書いて頂きありがとうございます！参考にさせて頂きます！！