- ベストアンサー
2番目のセレクトメニュー選択項目に応じてリンク先を変えたい
説明が下手糞な事お許し下さい。 javaを使ったセレクトメニューをウェブサイトに導入しようと、ネットで調べ、試行錯誤を繰り返し、大雑把な形は出来たのですが、やはりどうもうまくいきません。 やりたいことは、一つ目のセレクトメニュー（色）を選び、二つ目のセレクトメニュー（コンピューター）を選ぶと、個々に指定したアルファベットのリンクを表示したいのですが・・・ 以下のソースだと、初期状態では、ＡＢＣの3項目が最初から現れており、二つ目のセレクトメニューを選ぶと必ず、上段はＡ・中段はＢ・下段はＣと出てしまい、一つ目を選びなおすと前のリンクが残ったままになっております。 黒のmacを選ぶとＡを、 白のetcを選ぶとＡを、 赤のWindowsを選ぶとＣを、 といった感じで個々にリンク先を変えることができ、一つ目のセレクトメニューを選びなおすと前のリンク先の結果の表示が消える方法、初期状態でアルファベットのリンクを出さない方法は無いでしょうか？ ご存知の方、どうかアドバイスをお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script language="JavaScript"><!-- menuItem = [ ["windows","mac","etc"], ["windows","mac","etc"], ["windows","mac","etc"], ]; function setMenuItem(n) { len = document.myForm.Computer.options.length; for (i=len-1; i>=0; i--) { document.myForm.Computer.options[i] = null; } for (i=0; i<menuItem[n].length; i++) { document.myForm.Computer.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } function setTable(selOBJ) { for (i=1; i<=3; i++) { if (document.all) document.all["tbl"+i].style.visibility = "hidden"; if (document.layers) document.layers["tbl"+i].visibility = "hidden"; } n = selOBJ.selectedIndex + 1; if (document.all) document.all["tbl"+n].style.visibility = "visible"; if (document.layers) document.layers["tbl"+n].visibility = "visible"; } // --></script> </head> <body> <form name="myForm"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="black">黒</option> <option value="white">白</option> <option value="red">赤</option> </select> <select name="Computer" onchange="setTable(this)"> <option value="windows">windows</option> <option value="mac">mac</option> <option value="etc">etc</option> </select> </form> <div id="tbl1" class="tbl"><a href="http://www.yahoo.co.jp/">A</a></div> <div id="tbl2" class="tbl"><a href="http://www.yahoo.co.jp/">B</a></div> <div id="tbl3" class="tbl"><a href="http://www.yahoo.co.jp/">C</a></div> </body> </html>
- carsea802
- お礼率25% (4/16)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
くげんを１つ、いうじょ！ にんげんはよくぶかいもので、よくぼうがみたされると またつぎのよくぼうがうまれてくる、ばぶ。 「じつは、こうしたかったよ」、とあとづけでいわれると せっけいからみなおすひつようがあるじょ！ ちょうめんどうだ。ばぶ。 ないぶてきに、せれくとのこぴーのばっふぁをつくって そことやりとりしてるじょ <html> <style type="text/css"> #abc a { display:none} </style> <body> <form name="myForm"> <select name="Maker" onChange="setGroup('b','c')" id="b"> <option value="">-</option> <option value="black">黒</option> <option value="white">白</option> <option value="red">赤</option> </select> <select name="Computer" onchange="test()" id="c"> <option value="" selected="selected">-</option> <optgroup label="black"> <option value="window">1_windows</option> <option value="mac">1_mac</option> <option value="etc">1_etc</option> </optgroup> <optgroup label="white"> <option value="window">2_windows</option> <option value="mac">2_mac</option> <option value="etc">2_etc</option> </optgroup> <optgroup label="red"> <option value="window">3_windows</option> <option value="mac">3_mac</option> <option value="etc">3_etc</option> </optgroup> </select> </form> <div id="abc"> <a href="http://www.yahoo.co.jp/" id="black_window">bw</a> <a href="http://www.yahoo.co.jp/" id="white_window">Aw</a> <a href="http://www.yahoo.co.jp/" id="red_window">rw</a> <a href="http://www.yahoo.co.jp/" id="black_mac">bm</a> <a href="http://www.yahoo.co.jp/" id="white_mac">wm</a> <a href="http://www.yahoo.co.jp/" id="red_mac">rm</a> <a href="http://www.yahoo.co.jp/" id="black_etc">be</a> <a href="http://www.yahoo.co.jp/" id="white_etc">we</a> <a href="http://www.yahoo.co.jp/" id="red_etc">re</a> </div> <script type="text/javascript"> var Select_buffer = document.createElement('select'); setGroup('b','c') function setGroup (value_elementId, target_elementId) { var d = document; var v = d.getElementById(value_elementId).value; var t = d.getElementById(target_elementId); var s = t.childNodes; var c = 0; var o; while (o = s[c]) if ('OPTGROUP' == o.nodeName) Select_buffer.appendChild(o); else c++; s = Select_buffer.childNodes; c = 0; while (o = s[c++]) if (o.getAttribute('label') == v) t.appendChild(o); test(); } function test() { var d = document; var bv = d.getElementById('b').value; var id = bv +'_'+d.getElementById('c').value; var s = d.getElementById('abc').getElementsByTagName('A'); var o; var c = 0; while (o = s[c++]) o.style.display = (o.id == id) ? 'inline': 'none'; } </script>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
No2です。 投稿してから気がつきました。 lnk = document.getElementById('links').getElementsByTagName('DIV'); ↓ lnk = document.getElementById('links').getElementsByTagName('A'); ですね。すんません、訂正してください。
- fujillin
- ベストアンサー率61% (1594/2576)
黒、白、赤とwin、mac、etsの組合せ（全部で9通り）と表示するものの関連がどのようになっているのかよくわかりませんが… とりあえず、関連がなくても自由に指定できるように、menuＩｔｅｍと一緒に、表示するリンク番号も定義しておくという方式にしています。 （表示文字の後ろに「：番号」でdivの番号を定義。スタートは0） なにか関連がある場合は、関連から決める方式が良いと思います。 以下参考までに （win、mac、etsは区別のため先頭にb、w、rを付けています） <html> <script language="JavaScript"> <!-- var menuN=0, sel, lnk; var menuItem = [ ["b_windows:0","b_mac:1","b_etc:2"], ["w_windows:1","w_mac:2","w_etc:0"], ["r_windows:2","r_mac:0","r_etc:1"] ]; window.onload = function() { sel = document.getElementById('Computer'); lnk = document.getElementById('links').getElementsByTagName('DIV'); setMenuItem(0); } function setMenuItem(n) { menuN = n; sel.options.length = 0; for (var i=0; i<menuItem[n].length; i++) { var m = menuItem[n][i].split(':')[0]; sel.options[i] = new Option(m,m); } setTable(0); } function setTable(n) { var indx = menuItem[menuN][n].split(':')[1]; for (var i=0; i<lnk.length; i++) lnk[i].style.display=(i==indx)?"inline":"none"; } // --> </script> </head> <body> <form name="myForm"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="black" selected>黒</option> <option value="white">白</option> <option value="red">赤</option> </select> <select name="Computer" id="Computer" onchange="setTable(this.selectedIndex)"> </select> </form> <div id="links"> <a href="http://www.yahoo.co.jp/">A</a> <a href="http://www.yahoo.co.jp/">B</a> <a href="http://www.yahoo.co.jp/">C</a> </div> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
こんなかんじでどう？ みやすくするため、ぜんかくのくうはくでいんでんとしてます てきとうになおしてくくださいね ばぶぅ～。 <style type="text/css"> #abc a { display:none} </style> <form name="myForm"> <p> <select name="Maker" onChange="test()" id="b"> <option value="">-</option> <option value="black">黒</option> <option value="white">白</option> <option value="red">赤</option> </select> <select name="Computer" onchange="test()" id="c"> <option value="">-</option> <option value="windows">windows</option> <option value="mac">mac</option> <option value="etc">etc</option> </select> </p> </form> <div id="abc"> <a href="http://www.yahoo.co.jp/" id="black_window">bw</a> <a href="http://www.yahoo.co.jp/" id="white_window">Aww</a> <a href="http://www.yahoo.co.jp/" id="red_window">rw</a> <a href="http://www.yahoo.co.jp/" id="black_mac">bm</a> <a href="http://www.yahoo.co.jp/" id="white_mac">wm</a> <a href="http://www.yahoo.co.jp/" id="red_mac">rm</a> <a href="http://www.yahoo.co.jp/" id="black_etc">be</a> <a href="http://www.yahoo.co.jp/" id="white_etc">we</a> <a href="http://www.yahoo.co.jp/" id="red_etc">re</a> </div> <script type="text/javascript"> function test() { var d = document; var id = d.getElementById('b').value+'_'+d.getElementById('c').value; var s = d.getElementById('abc').getElementsByTagName('A'); var o; var c = 0; while (o = s[c++]) o.style.display = (o.id == id) ? 'inline': 'none'; } </script>
お礼
ご回答ありがとうございます。とても嬉しいです。 早速、babu_baboo様から頂きましたもの試してみました。 こちら二つ目のセレクトメニューは共有されているのでしょうか？ 二つ目は各色に独立したセレクトメニューを作りたいのですが・・・ もしまだご教授頂けるのであれば、お知恵をお貸し下さいませ。