No.4ベストアンサー
- 回答日時:
submitなしにリアルタイムで変更しなければならないなら、
やはり全選択肢をHTMLに抱えるしかないですね。
ざっと作ってみましたが、こんな感じでどうでしょうか?
(ちゃちゃっと作ったのできれいじゃないですが…)
-----------------------------------------------------
<html>
<head>
<script>
<!--
/* データ定義部(ここをDB検索結果から生成) */
var dataMain = new Array(
new Array("1", "くだもの"),
new Array("2", "やさい"),
new Array("3", "さかな")
);
var dataSub = new Array(
new Array(
new Array("1", "りんご"),
new Array("2", "みかん"),
new Array("3", "いちご")
),
new Array(
new Array("1", "にんじん"),
new Array("2", "だいこん"),
new Array("3", "きゅうり")
),
new Array(
new Array("1", "さば"),
new Array("2", "いわし"),
new Array("3", "さんま")
)
);
// プルダウンを初期化
function initSel() {
var selMain = document.forms[0].elements["selMain"];
// メインのプルダウンを初期化
setDataToSel(selMain, dataMain);
// 先頭を選択
selMain.selectedIndex = 0;
// 先頭を選択したのと同じ処理
changeSel();
}
// プルダウンを選択したときの処理
function changeSel() {
var selMain = document.forms[0].elements["selMain"];
var selSub = document.forms[0].elements["selSub"];
// メインのプルダウンの選択値によりサブの選択肢データを取得
var data = dataSub[selMain.selectedIndex];
// サブのプルダウンの選択肢を入れ換え
setDataToSel(selSub, data);
}
// データを選択肢にセット
function setDataToSel(sel, data) {
// 選択肢をいったんクリア
for(var i = 0 ; i < sel.options.length ; i++) {
sel.options[i] = null;
}
// 新しい選択肢を作る
for(var i = 0 ; i < data.length ; i++) {
var dt = data[i];
sel.options[i] = new Option(dt[1], dt[0]);
}
}
//-->
</script>
</head>
<body onLoad="initSel()">
<form>
<p>
メイン:
<select name="selMain" size="1" onChange="changeSel()"></select>
</p>
<p>
サブ:
<select name="selSub" size="1"></select>
</p>
</form>
</body>
</html>
ありがとうございます!
早速やってみました!バッチシできました!!
もうちょっと加工したらうまくいきそうです。
ほんとに助かりましたーm(__)m
No.3
- 回答日時:
PHPで処理するのであれば、その仕組みを作るのに
とくにJavascriptの処理は必要ないと思います。
単純に、データベースから取得した選択肢の一覧情報から、
<SELECT>タグの中の<OPTION>タグを作ればOKでしょう。
2つ目のプルダウンには、1つ目のプルダウンで選んだものに
属する選択肢だけがあればいいんですよね?
ありがとうございます。
その通りなんですが、一個目のプルダウンを選んだ時点で、リアルタイムに二個目が変わらないとダメなんです。PHPの様に、ユーザーが『送信』などでsubmitしてから反映されるのではなく、選んでページをリロードせずにその瞬間に反映させたいので、PHPだけでは無理かと思ったんです。
No.2
- 回答日時:
PHPでSQLを投げるのはサーバ処理になります。
Javascriptはあくまでブラウザ上で動くだけの
クライアント側での処理になります。
ですので、以下の2つのいずれかになります。
・onChange等でsubmitし、プルダウンの選択肢が該当するものになるように、PHPから応答を返す。
・最初から全パターンをJavascriptに持たせておき、submitせずにJavascriptで切り替える。
前者は通信が行われてしまいます。
後者は全データをブラウザに抱えなければなりません。
データ量が多ければ前者、少なければ後者を選ぶのがいいと思います。
ありがとうございます!
最初からJavaに含ませるには点数が多いので、そのページへアクセスした時にPHP上でMySQLから必要な項目をHTML上に展開して、その内容をJavaScriptでプルダウンに反映させられる様な仕組みを作りたいです。
JavaScriptに関しては知識がない為、さっぱりピンと来ないのです。
なんとなく、PHPでHTML上に展開している情報をグループ分けしてnameで分けて、一個目のプルダウンで選んだ項目と同じnameのあるグループの内容を二個目のプルダウンにロードするような仕組みで可能だと思うのですが、その仕組みをJavaScriptで組めるかとなると、分からないのです。。。
もうちょっとヒント頂けると助かります。宜しくお願いします!!
No.1
- 回答日時:
参考URLの例文集の
「フォーム/セレクトメニュー編」の
「[15]セレクトメニューの選択項目に応じて、もう1つのセレクトメニューの内容を変更する」
あたりが参考になると思います。
参考URL:http://www.openspc2.org/reibun/javascript/index. …
ありがとうございます!
早速参考URLをみさせて頂きました。
まさにこの方法だ!っと思っていろいろ確かめたのですが、うまくいかなかったのです。
実は、PHPで、SQLから引っ張ってきた内容を反映させたかったので、このやり方だと項目数が決まってしまい、思っている動きにはならなそうでした。。。
JavaScriptで、Aの項目をえらんだら、それに連動したBの項目をPHPファイルの特定の場所から読み込んでプルダウンメニューに表示するといった動きがしたいです。
onChangeハンドラで何とか出来ないかと模索しております。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
シンプルなweb版スタンプラリー...
-
リンクの有無を判別して画像の...
-
C#OpenCv V4にのエラーに関する...
-
四肢麻痺の娘のパソコンの使い方
-
HTMLにWSHを組み込む
-
期限内の場合はクッキーを上書...
-
javascriptでのURLの引数
-
カラー表記の足し算プログラム
-
イラレでナンバリングする方法
-
【西暦等の変換】
-
GoogleMaps API 住所から複数ピ...
-
swiftのwhile文についてです
-
ワイルドカード もしくは あ...
-
ulとliを指定し横に並べて
-
html javascript リンク先アド...
-
JsでDateオブジェクトの年月日...
-
二次元配列を使って順位をだす...
-
JavaScript を使ってpkゲームを...
-
関数でy=g(x)のgとは何の略です...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
ジェネレーターの作り方
-
ASP.NETのコントロールの値をJa...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
ASP.NET MVCでObjectをjsに渡す
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
シンプルなweb版スタンプラリー...
-
html javascript リンク先アド...
-
ローカルにあるファイルを検索...
-
javascriptでiframeのURL変更は?
-
javaScript textareaの一行あた...
-
イベントが初めの一回しか起き...
-
C# 演算 奇数と偶数 表現の仕方
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
条件に応じて座席表をつくりた...
おすすめ情報