javaScriptで2つコンボの連動セレクトメニューを作りたいのですが、
下記URLを参考にしようと思っております。
http://homepage2.nifty.com/godakaz/laboratory/re …
これに、[GO]ボタンをつけて、その[GO]ボタンを押すと、
各選択項目(上記URLの場合は右側の選択値)に指定したURLに飛ぶようにしたいのですが、、方法が分かりません。
参考になるサイト、アドバイス等宜しくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは
参考サイトのソースとは少しセレクトボックスの作り方が違いますが・・・
<script language="JavaScript">
<!--
menuI = [ ["----"] , ["セレクト2","D","E","F"] , ["セレクト2","G","H"] ];
menuV = [ [""] , ["","a.html","b.html","c.html"] , ["","d.html","e.html"] ];
function set(n) {
document.form.push.disabled = true;
obj = document.form.sel2;
for(i=obj.length; i>=0; i--){ obj.options[i] = null; }
for(i=0; i<menuI[n].length; i++) {
obj.options[i] = new Option(menuI[n][i],menuV[n][i]);
}
}
function pushon(){
document.form.push.disabled = false;
if(document.form.sel2.value == "") { document.form.push.disabled = true; }
}
function url() {
location.href = document.form.sel2.value;
}
// -->
</script>
<form name="form">
<select name="sel1" onChange="set(this.selectedIndex)" style="width:100px;">
<option value="">セレクト1</option>
<option value="A">A</option>
<option vlaue="B">B</option>
</select>
<select name="sel2" onChange="pushon()" style="width:100px;">
<option>----</option>
</select>
<input type="button" name="push" value="GO" disabled onClick="url()">
</form>
menuIが[ [セレクト1を選んだときのメニュー] , [Aを選んだときのメニュー] , [Bを選んだときのメニュー] ]
という感じで
menuVがそれぞれのメニューに対応したリンク先となります
左のメニューを増やすときはmenuI,menuV内の[ ]を増やしていけばO.K.です
とりあえず誤リンクを防ぐ為右のメニューが選択されたらボタンが有効になるようにしてますが必要でなければ『disabled』がついてるものを削除してください(以下の4ヶ所)
document.form.push.disabled = true;
function pushon() { }全部
onChange="pushon()"
disabled
No.1
- 回答日時:
右側のセレクトボックスにonChangeを設定し、
onChange="location.href=this.value"とすればよいでしょう
(こまかく言うとその他いくつかの処理をつけたほうがよいですが
とりあえずこれで動きます)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
リンク先にまで色変更されたま...
-
JQuery selectが反映されない
-
html selectの内容を初期値に戻す
-
onchange等のイベントハンドラ...
-
JavaScriptカレンダーの日付を...
-
プルダウンで現在の年月日を取...
-
selectタグに直接onChangeを書...
-
dijit.form.ComboBoxについて
-
return trueとreturn falseの用...
-
javascript による POST 送信時...
-
テキストボックスに入力された...
-
プルダウンメニューを表の中に...
-
VBSでブラウザ上のテキストボッ...
-
ラジオボタンの選択で解答・点...
-
追加ボタンを押した際に ok ボ...
-
netscapeでもinnerTextやinnner...
-
tableの任意行にfocusをあてる
-
value内に変数を入れたい
-
submitするとなぜか2度実行する
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
JQuery selectが反映されない
-
selectメニューのselectedの位...
-
onFocusOutが複数回呼ばれる!
-
フォームのメニューリストを外...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
Selectの中身をfor文で入れる
-
javascriptでselectボックスの<...
-
html selectの内容を初期値に戻す
-
ブラウザの戻るボタンを押した...
-
プルダウンで現在の年月日を取...
-
リストボックスの項目の順番を...
-
プルダウンとテキストの連動
-
<textarea>にプルダウンを表示...
-
DBの値を利用して、3つの連動し...
-
UWSCのIE操作でプルダウンを選...
おすすめ情報