ラジオボタンとセレクトフォームを用意して、選択されたラジオボタンごとにセレクトフォームの内容を変更するスクリプトです。 当然、2つ目のフォームを変更すると指定したURLへジャンプすることが可能です。
多くのメニューを有するコンテンツにおいて、その威力を遺憾なく発揮することが可能でしょう。 数十のメニューをたった2つのフォームに凝縮することが可能で、メニューを非常にコンパクトにまとめることができます。
HEAD部分にスクリプトを記述します。 フォームをBODY部に記述します。
各メニューの設定はスクリプトトップ部分の配列変数で行います。 また、メニューの数を変更するには配列宣言の個数を適宜変更する必要があります。 その他は扱う必要はありません。
IE3,NN3以上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ラジオ&セレクトフォームジャンプ</title> <script language="JavaScript"> <!-- var URL = 0; var COM = 1; //必要に応じて配列宣言を追加削除 var urlList1 = new Array(); var MaxList2 = new Array(); var urlList2 = new Array(); urlList2[0] = new Array(); urlList2[0][0] = new Array(); urlList2[0][1] = new Array(); urlList2[0][2] = new Array(); urlList2[0][3] = new Array(); urlList2[0][4] = new Array(); urlList2[1] = new Array(); urlList2[1][0] = new Array(); urlList2[1][1] = new Array(); urlList2[1][2] = new Array(); urlList2[1][3] = new Array(); urlList2[2] = new Array(); urlList2[2][0] = new Array(); urlList2[2][1] = new Array(); urlList2[2][2] = new Array(); urlList2[2][3] = new Array(); urlList2[2][4] = new Array(); urlList2[3] = new Array(); urlList2[3][0] = new Array(); urlList2[3][1] = new Array(); urlList2[4] = new Array(); urlList2[4][0] = new Array(); urlList2[4][1] = new Array(); urlList2[4][2] = new Array(); urlList2[4][3] = new Array(); //メニュー設定ここから var MaxList1 = 5; //List1の項目数 MaxList2[0] = 5; //List1の1項目目に対応するList2の項目数 urlList2[0][0][URL] = ""; //List1の1項目目に対応するList2の1項目目のURL urlList2[0][0][COM] = "--- LIST1 ---"; //List1の1項目目に対応するList2の1項目目の表示内容 urlList2[0][1][URL] = "sp56_0.html"; urlList2[0][1][COM] = "LIST1 - 1"; urlList2[0][2][URL] = "sp56_0.html"; urlList2[0][2][COM] = "LIST1 - 2"; urlList2[0][3][URL] = ""; urlList2[0][3][COM] = "---------"; urlList2[0][4][URL] = "sp56_0.html"; urlList2[0][4][COM] = "LIST1 - 2"; MaxList2[1] = 4; //List1の2項目目に対応するList2の項目数 urlList2[1][0][URL] = ""; urlList2[1][0][COM] = "--- LIST2 ---"; urlList2[1][1][URL] = "sp56_0.html"; urlList2[1][1][COM] = "LIST2 - 1"; urlList2[1][2][URL] = "sp56_0.html"; urlList2[1][2][COM] = "LIST2 - 2"; urlList2[1][3][URL] = "sp56_0.html"; urlList2[1][3][COM] = "LIST2 - 3"; MaxList2[2] = 5; urlList2[2][0][URL] = ""; urlList2[2][0][COM] = "--- LIST3 ---"; urlList2[2][1][URL] = ""; urlList2[2][1][COM] = "========="; urlList2[2][2][URL] = "sp56_0.html"; urlList2[2][2][COM] = "LIST3 - 2"; urlList2[2][3][URL] = "sp56_0.html"; urlList2[2][3][COM] = "LIST3 - 3"; urlList2[2][4][URL] = "sp56_0.html"; urlList2[2][4][COM] = "LIST3 - 4"; MaxList2[3] = 2; urlList2[3][0][URL] = ""; urlList2[3][0][COM] = "--- LIST4 ---"; urlList2[3][1][URL] = "sp56_0.html"; urlList2[3][1][COM] = "LIST4 - 1"; MaxList2[4] = 3; urlList2[4][0][URL] = ""; urlList2[4][0][COM] = "--- LIST5 ---"; urlList2[4][1][URL] = "sp56_0.html"; urlList2[4][1][COM] = "LIST5 - 1"; urlList2[4][2][URL] = "sp56_0.html"; urlList2[4][2][COM] = "LIST5 - 2"; //メニュー設定ここまで //List1 function List1Out(){ var i; var n = -1; for(i = 0; i <= document.Jump1.elements.length - 1; i++){ if(document.Jump1.elements[i].checked) n = i; } if(n != -1){ List2Out(); } } //List2 function List2Out(){ var i; var n = -1; for(i = 0; i <= document.Jump1.elements.length - 1; i++){ if(document.Jump1.elements[i].checked) n = i; } if(n != -1){ document.Jump2.LTitle2.options.length = MaxList2[n]; for(i = 0; i <= MaxList2[n] - 1; i++){ document.Jump2.LTitle2.options[i].text = urlList2[n][i][COM]; } document.Jump2.LTitle2.selectedIndex = 0; } } //Jump function JumpAnchor(){ var i; var m = -1; var n; for(i = 0; i <= document.Jump1.elements.length - 1; i++){ if(document.Jump1.elements[i].checked) m = i; } n = document.Jump2.LTitle2.selectedIndex; if(urlList2[m][n][URL] != ""){ location = urlList2[m][n][URL]; } } // --> </script> </head> <body onload="List1Out()"> <form name="Jump1"> <span style="font-size:16pt;font-weight:bold;font-family:verdana,Osaka,sans-serif">LIST1</span><br> <input type="radio" name="LTitle1" onclick="List2Out()" value="tp1">TYPE1<br> <input type="radio" name="LTitle1" onclick="List2Out()" value="tp2" checked>TYPE2<br> <input type="radio" name="LTitle1" onclick="List2Out()" value="tp3">TYPE3<br> <input type="radio" name="LTitle1" onclick="List2Out()" value="tp4">TYPE4<br> <input type="radio" name="LTitle1" onclick="List2Out()" value="tp5">TYPE5<br> </form> <form name="Jump2"> <span style="font-size:16pt;font-weight:bold;font-family:verdana,Osaka,sans-serif">LIST2</span><br> <select name="LTitle2" size="1" onchange="JumpAnchor()"> <!-- NN対策 begin --> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <!-- NN対策 end --> </select> </form> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>ラジオ&セレクトフォームジャンプ</title> <style type="text/css"> <!-- h1{ font-size: 24pt; font-weight: bold; color: #900; } --> </style> </head> <body> <h1>Radio and Select Form LINK</h1> <a href="sp56.html">戻る</a> </body> </html>