セレクトメニューの連動、そしてページへのリンク

質問

[セレクトメニューA] > [セレクトメニューB] > [セレクトメニューC]
…というような、まずAで選び、それに対応したメニューBのうちのひとつを選び、そして最後にCのうちのひとつを選ぶと、

(たとえば、Cのセレクトメニューには
Yahoo
Google
Excite
のようなのがあり、それらを選択すると、)

あらかじめ設定しておいた該当するページへ行く、というようなしくみはどのように作ればいいのでしょうか？

ネット上を探し回って、自分で組み立てて作ってみましたが、

<!--
menu = [
　["A","B","C","D"],
　["E","F","G"],
　["H"]
];
function setMenu(n)
{
len = document.myForm.sb.options.length;
for (i=len-1; i>=0; i--)
{
document.myForm.sb.options[i] = null;
}
for (i=0; i<menu[n].length; i++)
{
document.myForm.sb.options[i] = new Option(menu[n][i],menu[n][i]);
}
}

menuItem = [
　["Z"],
　["Y","X","W","V"],
　["U","T","S","R"] ];
function setMenuItem(a)
{
len = document.myForm.s.options.length;
for (c=len-1; c>=0; c--)
{
document.myForm.s.options[c] = null;
}
for (c=0; c<menuItem[a].length; c++)
{
document.myForm.s.options[c] = new Option(menuItem[a][c],menuItem[a][c]);
}
}
// -->

─────────────────
<form name="myForm">
<select name="a" onchange="setMenu(this.selectedIndex)">
<option checked selected>セレクトA</option>
<option value="A">A</option>
<option value="E">E</option>
<option value="H">H</option>
</select> &gt;

<select name="sb" onchange="setMenuItem(this.selectedIndex)">
<option selected>　</option>
</select>&nbsp;&gt;
<select name="s" onChange="popJump(this)">
<option selected >　</option>
</select>
</form>

…と、３つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。

このプログラムにどのような修正を加えればよいのでしょうか？
よろしくお願いいたします。

回答No.3

leap_day · ベストアンサー

こんにちは

こんな感じですかね？

<SCRIPT language="JavaScript">
<!--
menuI1 = [ [ ] , ["セレクト2","D","E","F"] , ["セレクト2","G","H"] , ["セレクト2","I"] ];
menuV1 = [ [ ] , ["","","","1.html"] , ["","",""] , ["","2.html"] ];
menuI2 = [ [ ] , ["セレクト3","J","K"] , ["セレクト3","L","M","N"] ];
menuV2 = [ [ ] , ["","3.html","4.html"] , ["","5.html","6.html","7.html"] ];
menuI3 = [ [ ] , ["セレクト3","O","P"] , ["セレクト3","Q"] , ["セレクト3","R","S","T","U"] ];
menuV3 = [ [ ] , ["","8.html","9.html"] , ["","10.html"] , ["","11.html","12.html","13.html","14.html"] ];

function set(n,l) {
if(l == "sel1") {
if(n ==0 ){
document.form.sel2.style.visibility = "hidden";
document.form.sel3.style.visibility = "hidden";
return false;
}
obj1 = document.form.sel1;
obj2 = document.form.sel2;
obj3 = document.form.sel1.value;
Item = menuI1;
Value = menuV1;
document.form.sel3.style.visibility = "hidden";
}
if(l == "sel2") {
if(n ==0 ){
document.form.sel3.style.visibility = "hidden";
return false;
}
obj1 = document.form.sel2;
obj2 = document.form.sel3;
obj3 = document.form.sel2.value;
Item = menuI2;
Value = menuV2;
if(document.form.sel1.selectedIndex == 2) {
Item = menuI3;
Value = menuV3;
}
}

if(obj3 == "") {
len = obj2.options.length;
for (i=len-1; i>=0; i--) {
obj2.options[i] = null;
}
obj2.style.visibility = "visible";

for(i=0; i<Item[n].length; i++) {
obj2.options[i] = new Option(Item[n][i],Value[n][i]);
}
}
else {
location.href=obj3;
}
}
// -->
<!--
function url(n) {
location.href=n;
}
//-->
</SCRIPT>

<form name="form">
<select name="sel1" onChange="set(this.selectedIndex,'sel1')">
<option value="">セレクト1</option>
<option value="">A</option>
<option vlaue="">B</option>
<option vlaue="">C</option>
</select>

<select name="sel2" style="visibility:hidden" onChange="set(this.selectedIndex,'sel2')">
</select>

<select name="sel3" style="visibility:hidden" onChange="url(this.value)">
</select>

</form>

お礼

おぉ～、まさにこんな感じです！

ありがとうございました！　助かりました♪

回答No.2

yambejp

>ＡもＢも選ばないとＣは選択できないようにしたいのです…

CのonChangeのfunctionの中で、AとBのselectedIndexが0じゃない
ことをチェックすればいいでしょう。

もしくはAを選ぶことによってBのメニューを表示し、
Bを選ぶことによってCのメニューを表示する・・・
とするとよいでしょう。

補足

あー、再びありがとうございます…と言いたいのですが、そうでもなくて、

質問を整理しますと、
セレクトA：検索サイト
　　　　　 WEBサイト
　　　　　 携帯サイト
となっており、
例えば、「検索サイト」を選択した場合、
セレクトB：大手サイト
　　　　　 普通サイト
みたいな感じで、
「大手サイト」を選択すると、
セレクトC：Yahoo
　　　　　 Google
　　　　　 excite
この後、Yahooを選ぶと、Yahooのページに行く、といった具合です。

(セレクトAでWEBサイトを選んだ場合は、
セレクトBでは、公式サイト
　　　　　　　 一般サイト
の2つだけが表示される…
といった具合に、それぞれのセレクトで選んだものによって表示は変わる感じです。)

回答No.1

yambejp

>「セレクトCを選んだときに該当ページへジャンプ」

selectCにoptionでvalueをそれぞれのurlにしておき
onChangeでlocation.hrefにその値を指定してやればいいでしょう。
単純に書くとこんな感じ。

<select onChange="location.href=this.value">
<option value="">選択して</option>
<option value="http://www.yahoo.co.jp">Yahoo</option>
<option value="http://www.google.co.jp">Google</option>
</select>

※実際にはエラー回避などいれてfunction化することになるでしょう。

補足

あー、その方法も使ってみたのですが、それでは最初からセレクトCも選択できてしまいました…。

セレクトＡ、セレクトＢ、そしてセレクトＣと、ＡもＢも選ばないとＣは選択できないようにしたいのです…。

※質問文訂正
<select name="s" onChange="popJump(this)">
の「onChange="popJump(this)"」は、ミスでした。正しくは、
<select name="s">
でした。申し訳ありません。