![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
プログラミング初心者です。
頭文字を選択するとその頭文字から始まる大学が選択でき、大学を選択するとその大学に所属する学部を選択できるような登録フォームを作りたいです。
ちょうどリクナビの登録フォーム(https://job.rikunabi.com/2015/accounts/regist/)と同じような感じです。
検索してもなかなか役に立ちそうなページにたどり着けず、どのように作ったらいいのか全く分かりません。どなたか知恵をお貸しください。
ちなみにPHP(フレームワークはLaravel)、SQLiteで開発中です。
回答宜しくお願いします。
No.1ベストアンサー
- 回答日時:
どのような画面推移となる設計になるか次第ですが、
頭文字選択
↓
次画面で大学選択
↓
次画面で学部選択
という画面推移なら、それぞれの画面のPHPでは
フォームから来た値を使ってDBから検索し 次のフォームを作る
といった処理で可能です。
ただ1つの画面で、
頭文字を入れるテキストフォームや、大学名や学部名のセレクタが並んでいて
あるフォームの値で ダイナミックに(画面の推移なしに) セレクタの内容を変化させたいなら
サーバー再度で動くPHP等のCGIでなく、ブラウザ上で動くJavaScriptで作るのが 一般的です。
要は
頭文字のテキストフォームに入力された値が変化したイベントで 大学名のセレクタの選択肢を絞り込む
大学名の選択が変化したイベントで、学部名のセレクタの選択肢をその大学用に変更
というイベント処理をJavaScriptで作ればよいことになります。
よって、調べるのであればPHPでなく、JavaScriptということになります。
なお 各大学名の学部情報を全てJacvaScriptの変数に予め埋め込むと
通信データ量が肥大になったり、ブラウザでの負荷が高くなるということが予測されるなら、
Ajaxを使うのが、よいと思われます。
この場合、大学名(ないしは大学コード)を受け取って、学部名をリスト化して
XMLデータにして返す部分を、PHP等でプログラムすることになります。
No.2
- 回答日時:
複数の画面に分けるなら 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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Access(アクセス) Access 複数条件検索の設定が上手く行きません 1 2022/07/22 20:37
- Access(アクセス) Access 登録ボタンからサブフォームの更新 1 2022/07/22 10:23
- Excel(エクセル) 【Excel】指定のセル内容を基に別シートのセルを検索して選択する【VBA】 1 2022/06/16 16:16
- 学校 高校一年生です! 文理選択のアドバイスをください! 6月までに文理選択をしないといけないのですが、と 3 2022/05/25 22:27
- 学校 2浪北大進学は正解だったのでしょうか? 4 2022/09/05 00:48
- 大学受験 文系の高校2年生です。 進級後(3年生)の科目選択に悩んでいます。 現在は4年制大学へ進学して幼児教 1 2022/10/26 18:04
- 物理学 【 理系科目の選択 】 現在、高一の者です。 文系に興味がなく理系に進もうと思うのですが、物理と生物 7 2022/10/06 22:53
- 学校 大学の学部変更 2 2022/09/15 18:37
- JavaScript テーブルの中のセレクトボックスの値が0のとき、非表示にしたい 3 2022/05/29 10:13
- Illustrator(イラストレーター) Illustrator アンカーポイント選択について 3 2023/01/30 12:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンで選択された値を保持
-
PHP・MySQL・javascriptを用い...
-
セレクトしたときに全て初期状...
-
php セレクトボックス 値取得
-
ウェブ上で選択した複数行の内...
-
<select>文、foreachと初期値設定
-
phpでのセレクトボックスの値を...
-
PHP プルダウンメニュー MYSQL
-
SELECTタグでのデータ取り出し
-
2つのプルダウンメニュから受け...
-
「"」(ダブルクォーテーション)...
-
コンボボックス(プルダウン)...
-
セレクトフォームで選択した複...
-
自作ブログのPing送信について
-
<input type="hidden" >で配列...
-
laravelを利用してコントロール...
-
phpで変数を使ってcopyできない
-
HTMLで前の画面に戻る時、入力...
-
ラジオボタンのチェックを判定...
-
フォーム送信後の更新ボタンで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウンとCSVの連動
-
現在時刻を反映させた時刻のプ...
-
「"」(ダブルクォーテーション)...
-
選択したタグ、入力した検索文...
-
複数 selectフォームから今回on...
-
2つのプルダウンメニュから受け...
-
複数のセレクトボックスで
-
連動させたいセレクトボックス...
-
GET又はPOSTで受け取るデータに...
-
データベースにある値でリスト...
-
php セレクトボックス 値取得
-
<select>文、foreachと初期値設定
-
コンボボックス(プルダウン)...
-
PHP で画面の一部だけを変えたい。
-
セレクトフォームで選択した複...
-
phpでのセレクトボックスの値を...
-
ループでチェックボックスにche...
-
プログラミング言語で、使える...
-
奇数や偶数を調べる関数
-
Smartyで、セレクトボックスが...
おすすめ情報