[セレクトメニュー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> >
<select name="sb" onchange="setMenuItem(this.selectedIndex)">
<option selected> </option>
</select>>
<select name="s" onChange="popJump(this)">
<option selected > </option>
</select>
</form>
…と、3つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。
このプログラムにどのような修正を加えればよいのでしょうか?
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
こんにちは
こんな感じですかね?
<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
- 回答日時:
>AもBも選ばないとCは選択できないようにしたいのです…
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
- 回答日時:
>「セレクト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も選択できてしまいました…。
セレクトA、セレクトB、そしてセレクトCと、AもBも選ばないとCは選択できないようにしたいのです…。
※質問文訂正
<select name="s" onChange="popJump(this)">
の「onChange="popJump(this)"」は、ミスでした。正しくは、
<select name="s">
でした。申し訳ありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
セレクトを全て選択されていな...
-
CSVファイルを読みこみ、プルダ...
-
selectタグに直接onChangeを書...
-
jQuery セレクトボックスで選択...
-
jquery での <select multiple=...
-
HTMLコンボボックスへの項目追加
-
セレクトボックスで現在選択さ...
-
html selectの内容を初期値に戻す
-
SELECTの生成でselected設定が...
-
onchange等のイベントハンドラ...
-
return trueとreturn falseの用...
-
hiddenのvalueの値を変えたい
-
onchangeイベントを強制的に発...
-
チェックボックスの設定
-
javascriptでASPにデータを渡す
-
テキストエリアをenterキーでフ...
-
クリックの度に加算していくには?
-
プルダウンで選択すると、DBの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
テーブルにおける行(セルにプル...
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
document.form で nullまたは...
-
リストボックスの項目の順番を...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
selectタグに直接onChangeを書...
おすすめ情報