- ベストアンサー
プルダウンをもう一つ増やしたい＆フレームページで使用のため、別ウインドウで表示させたい
- プルダウンを追加する方法と、別ウィンドウで表示させる方法を教えてください。
- 他サイトへのジャンプさせるための追加プルダウンの設定方法を教えてください。
- フレームページで他サイトの表示を別ウィンドウで行う方法を教えてください。
- MAZDA_MPV
- お礼率30% (9/30)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 何処でうまくいっていないのか書かれていないのでちょっと答えにくいですが・・・ 感じ的には [0]┳[1]━[4]or[5]or[6]or[7] ┣[2]━[8]or[9] ┗[3]━[10]or[11]or[12]or[13]or[14]or[15] で[4]～[15]のセレクトでwindow.openしているのですよね？ 結構数が多いですね(笑） 下記のようにして簡略化も出来ます [4]～[15]の<select>の<option valueにはサイトのURLを入れてますよね？ （item4～item15の<option>は文字数獲得の為省略していますｍ（－－）ｍ <script language="javascript"><!-- x = document.getElementsByTagName("select"); function showthis(obj) { for(i=1;i<x.length;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis2(obj) { for(i=4;i<8;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis3(obj) { for(i=8;i<10;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis4(obj) { for(i=10;i<16;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function jump(url) { if(!url) return false; window.open(url,""); } // --> </script> <style type="text/css"><!-- select { display:none; } #item0 { display:inline; } --></style> <form> <select id="item0" onchange="showthis(this.value)"> <option selected="selected">選んでください(item0)</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="showthis2(this.value)"> <option selected="selected">選んでください(item1)</option> <option value="item4"></option> <option value="item5"></option> <option value="item6"></option> <option value="item7"></option> </select> <select id="item2" onchange="showthis3(this.value)"> <option selected="selected">選んでください(item2)</option> <option value="item8"></option> <option value="item9"></option> </select> <select id="item3" onchange="showthis4(this.value)"> <option selected="selected">選んでください(item3)</option> <option value="item10"></option> <option value="item11"></option> <option value="item12"></option> <option value="item13"></option> <option value="item14"></option> <option value="item15"></option> </select> <select id="item4" onchange="jump(this.value)"> <option selected="selected">選んでください(item4)</option> <option value=""></option> </select> <select id="item5" onchange="jump(this.value)"> <option selected="selected">選んでください(item5)</option> <option value=""></option> </select> <select id="item6" onchange="jump(this.value)"> <option selected="selected">選んでください(item6)</option> <option value=""></option> </select> <select id="item7" onchange="jump(this.value)"> <option selected="selected">選んでください(item7)</option> <option value=""></option> </select> <select id="item8" onchange="jump(this.value)"> <option selected="selected">選んでください(item8)</option> <option value=""></option> </select> <select id="item9" onchange="jump(this.value)"> <option selected="selected">選んでください(item9)</option> <option value=""></option> </select> <select id="item10" onchange="jump(this.value)"> <option selected="selected">選んでください(item10)</option> <option value=""></option> </select> <select id="item11" onchange="jump(this.value)"> <option selected="selected">選んでください(item11)</option> <option value=""></option> </select> <select id="item12" onchange="jump(this.value)"> <option selected="selected">選んでください(item12)</option> <option value=""></option> </select> <select id="item13" onchange="jump(this.value)"> <option selected="selected">選んでください(item13)</option> <option value=""></option> </select> <select id="item14" onchange="jump(this.value)"> <option selected="selected">選んでください(item14)</option> <option value=""></option> </select> <select id="item15" onchange="jump(this.value)"> <option selected="selected">選んでください(item15)</option> <option value=""></option> </select> </form>
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは １： 同じようにshowthis()を増やしていけばいいです サンプルではitem1からitem4とitem5を選択できるようにしています ２： 別ウィンドウというのは別のフレームに・・ということ？ （function jump(){ }内の『（フレームname)』を変更してください） それともtarget="_blank"のようなもの？ function jump() { }内 window.open(url,""); に変更 <script type="text/javascript" language="JavaScript"> <!-- function showthis(obj) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById("item4").style.display = "none"; document.getElementById("item5").style.display = "none"; if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis2(obj) { document.getElementById("item4").style.display = "none"; document.getElementById("item5").style.display = "none"; if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function jump(url) { if(!url) return false; （フレームname).location.href=url; } // --> </script> <style type="text/css"> #item1,#item2,#item3,#item4,#item5 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">選んでください</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="showthis2(this.value)"> <option selected="selected">選んでください</option> <option value="item4"></option> <option value="item5"></option> </select> <select id="item4" onchange="jump(this.value)"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item5" onchange="jump(this.value)"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item2" onchange="jump(this.value)"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item3" onchange="jump(this.value)"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form>
補足
ありがとうございます。 数を増やしてみたのですがうまくいきません。 何が原因でしょうか？？？ <script type="text/javascript" language="JavaScript"> <!-- function showthis(obj) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById("item4").style.display = "none"; document.getElementById("item5").style.display = "none"; document.getElementById("item6").style.display = "none"; document.getElementById("item7").style.display = "none"; document.getElementById("item8").style.display = "none"; document.getElementById("item9").style.display = "none"; document.getElementById("item10").style.display = "none"; document.getElementById("item11").style.display = "none"; document.getElementById("item12").style.display = "none"; document.getElementById("item13").style.display = "none"; document.getElementById("item14").style.display = "none"; document.getElementById("item15").style.display = "none"; if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis2(obj) { document.getElementById("item4").style.display = "none"; document.getElementById("item5").style.display = "none"; document.getElementById("item6").style.display = "none"; document.getElementById("item7").style.display = "none"; if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis3(obj) { document.getElementById("item10").style.display = "none"; document.getElementById("item11").style.display = "none"; document.getElementById("item12").style.display = "none"; document.getElementById("item13").style.display = "none"; document.getElementById("item14").style.display = "none"; document.getElementById("item15").style.display = "none"; if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function jump(url) { if(!url) return false; window.open(url,""); } // --> </script>
お礼
何から何までありがとうございます。 ＞感じ的には [0]┳[1]━[ ┣[2]━[8]or[9] ┗[3]━[10]or[11]or[12]or[13]or[14]or[15] で[4]～[15]のセレクトでwindow.openしているのですよね？ そうですそんな感じです。 むずかしいですけどがんばってみます。 またわからなくなったら教えてください。（図図しくて申し訳ございません）