- 締切済み
javaScriptで連動セレクトメニュー
javaScriptで2つコンボの連動セレクトメニューを作りたいのですが、 下記URLを参考にしようと思っております。 http://homepage2.nifty.com/godakaz/laboratory/rel2sel2.html これに、[GO]ボタンをつけて、その[GO]ボタンを押すと、 各選択項目(上記URLの場合は右側の選択値)に指定したURLに飛ぶようにしたいのですが、、方法が分かりません。 参考になるサイト、アドバイス等宜しくお願いいたします。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 参考サイトのソースとは少しセレクトボックスの作り方が違いますが・・・ <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
- yambejp
- ベストアンサー率51% (3827/7415)
右側のセレクトボックスにonChangeを設定し、 onChange="location.href=this.value"とすればよいでしょう (こまかく言うとその他いくつかの処理をつけたほうがよいですが とりあえずこれで動きます)