複数のプルダウンメニューの表示について

質問

複数のプルダウンメニューについてですが、
以前、こちらで教えてもらったことを応用したいのです。

フォーームの中の「グループ1」と「グループ2」という大分類は文字の表示だけでリンクしないようにしたいのです。
この状態だと、「グループ1」という名前もプルダウンの中に入ってしまって、
ファイルがないので、リンクエラーの警告がでます。

どこが間違っていて、
どのように変えたらいいのでしょうか。

よろしくお願い致します。

<script language="javascript">
<!--

var s;
function reSel(c) {
if(s&&(s!=c)) s.options[0].selected=true;
s=c;
}

function A_Li() {
　　Sel=document.Link1.OP.selectedIndex;
　　Ms=document.Link1.OP.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP);
}

function B_Li() {
　　Sel=document.Link1.OP2.selectedIndex;
　　Ms=document.Link1.OP2.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP2);
}

// -->
</script>

---------------HTML------------

<FORM name="Link1">

<SELECT name="OP" onChange="A_Li()" size="1">
<OPTION Value="-" SELECTED>グールプ1</option>
<option value="1.htm">あ</option>
<OPTION Value="2.htm">い</option>
<OPTION Value="3.htm">う</option>
<OPTION Value="4.htm">え</option>
<OPTION Value="5.htm">お</option>
</SELECT>

<SELECT name="OP2" onChange="B_Li()" size="1">
<OPTION Value="-" SELECTED>グールプ2</option>
<option value="6.htm">か</option>
<OPTION Value="7.htm">き </option>
<OPTION Value="8.htm">く </option>
</SELECT>

回答No.1

noname#2494 · ベストアンサー

>どこが間違っていて、

間違っているというか、プログラム通りに動いている証拠ですね。

その大分類の時は無視するようにプログラムしなければならないと思います。

>どのように変えたらいいのでしょうか。

function A_Li() {
if(document.Link1.OP.options[Sel].value != "-") {
　　 Sel=document.Link1.OP.selectedIndex;
　　 Ms=document.Link1.OP.options[Sel].value;
　　 parent.main.location.href=Ms;
reSel(document.Link1.OP);
}

と言うような感じで、if文を追加すれば、大分類の時には変更しても変化が出ないようになると思います。

いかがでしょうか？

お礼

みなさん、ご丁寧にありがとうございました。
みなさんのを参考になんとかできました。

ありがとうございました。

補足

早速のご回答をありがとうございます。
変更してみたのですが、

例えば「グループ1」の小項目から「グループ2」の小項目をうつって、
次に「グループ1」の”大項目（グループ1という名称）”をクリックした場合は
変更がでないのですが、
同じグループ内の小項目を行き来すると「ページが表示できません」とでてしまいます。。。

回答No.4

loveobo

このカテゴリのＱ＆Ａで勉強させていただいている初心者です。
グループ1の最初の<option>にvalueを指定しなければ、A_Li() は何もしない
のではないでしょうか？　変更した<select>を「this」で Li()の引数に渡して、
functionを共有させてみました。嘘を書いていたらゴメンナサイ。

<script language="JavaScript"><!--
var s; //前に選択した<select>を格納する変数sを宣言
function Li(Grp) { //今回選択した<select>を引数Grpに受取り
Ms = Grp.options[Grp.selectedIndex].value; //リンク先urlを変数Msに格納
if (s &&(s!=Grp)) s.selectedIndex=0;
//前回変更した<select>があり、今回と異なる時、前回の選択肢を初期表示にする
s = Grp; //次にLi()が呼び出されるときの「前回選択した<select>」として格納
parent.main.location.href = Ms; //Msのファイル名をmainフレームに書き出す
}
//--></script>

<form>
<select onChange="Li(this)">
<option selected>グループ1
<option value="1.html">あ
<--中略-->
</select>
<select onChange="Li(this)">
<option selected>グループ2
<option value="6.html">か
<--以下略-->

お礼

みなさん、ご丁寧にありがとうございました。
みなさんのを参考になんとかできました。

ありがとうございました。

回答No.3

noname#2494

あ、すいません。
検証する時間がなかったので、未確認のまま回答してしまいましたが…

フォローありがとうございます。

回答No.2

A__

Hawk-Wさんは新しく Sel を得るのを忘れていたみたいです。

function A_Li() {
if(document.Link1.OP.options[Sel].value != "-") {
　　 Sel=document.Link1.OP.selectedIndex;

だったのを

function A_Li() {
　Sel=document.Link1.OP.selectedIndex;
　if(document.Link1.OP.options[Sel].value != "-") {

にすればうまくいきそうです。

<script language="javascript">
<!--

var s;

function reSel(c) {
　if(s&&(s!=c)) s.options[0].selected=true;
　s=c;
}

function A_Li() {
　Sel=document.Link1.OP.selectedIndex;
　Ms=document.Link1.OP.options[Sel].value;
　if(Ms!="-"){
　　alert(Ms+"_A")
　　parent.main.location.href=Ms;
　reSel(document.Link1.OP);
　}
}

function B_Li() {
　Sel=document.Link1.OP2.selectedIndex;
　Ms=document.Link1.OP2.options[Sel].value;
　if(Ms!="-"){
　　alert(Ms+"_B")
　　parent.main.location.href=Ms;
　　reSel(document.Link1.OP2);
　}
}

// -->
</script>
<button onClick=document.Link1.OP.options[0].selected=true></button>

<FORM name="Link1">

<SELECT name="OP" onChange="A_Li()" size="1">
<OPTION Value="-" SELECTED>グールプ1</option>
<option value="1.htm">あ</option>
<OPTION Value="2.htm">い</option>
<OPTION Value="3.htm">う</option>
<OPTION Value="4.htm">え</option>
<OPTION Value="5.htm">お</option>
</SELECT>

<SELECT name="OP2" onChange="B_Li()" size="1">
<OPTION Value="-" SELECTED>グールプ2</option>
<option value="6.htm">か</option>
<OPTION Value="7.htm">き </option>
<OPTION Value="8.htm">く </option>
</SELECT>

</FORM>

お礼

みなさん、ご丁寧にありがとうございました。
みなさんのを参考になんとかできました。

ありがとうございました。

補足

丁寧にありがとうございます。

やってみたのですが、例えばhtmにリンクすると、
全てにアラート表示がでてしまうのですが、私のほうで、
どこかを変えなければいけないでしょうか？

たびたびで申し訳ありませんが、よろしくお願い致します。