dポイントプレゼントキャンペーン実施中！

セレクトメニューセレクトメニューへのジャンプ

解決済

  • 質問者：kal1119
  • 質問日時：
  • 回答数：3件

こんにちは。

セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する方法は大体理解したのですが、
さらにもう一つ、＋もう一つ・・・とセレクトメニューの項目をリンクさせて変更することは可能でしょうか？

例えば、
セレクトメニュー(1)　選択
　　↓　ジャンプ
セレクトメニュー(2)　選択
　　↓　ジャンプ
セレクトメニュー(3)　選択
　　↓　ジャンプ
セレクトメニュー(4)　選択
　　↓
検索用CGI実行　クリック

というように選ばれた各項目ごとに次のセレクトメニューにジャンプして項目の変更を行いたいです。

参考サンプル等、
どなたか情報をお持ちの方がおりましたら、
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： kokorone
  • 回答日時：

こんな感じになります。


サンプルのセレクトは３つです。
初心者ということで甘えず、セレクト４つ
に対応できるよう、頑張ってください。
★★★★★★★★★★★★★★★★
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript">
<!--//
//
var strfruit = new Array("ミカン","ブドウ","サクランボ");
//
var strmikan = new Array("温州","甘夏","八朔","伊予柑");
var strbudou = new Array("デラウェア","巨峰","マスカット");
var strsakuranbo = new Array("高砂","佐藤錦","ナポレオン");
//
var strunsyu = new Array("200","202","203");
var stramanatu = new Array("210","212");
var strhassaku = new Array("220","222","224");
var striyokan = new Array("230","232");
//
var strdela = new Array("300","302","303");
var strkyoho = new Array("310","312");
var strhassaku = new Array("320","322","324");
var strmascut = new Array("330","332");
//
var strtakasago = new Array("400","402","403");
var strsatou = new Array("410","412");
var strhnapoleon = new Array("420","422","424");
//




function CreateList()
{
Create(document.frmSample.lstsel1, strfruit);
CreateList2();
}
//クリア関数
function Clearsel2()
{
//現在のプルダウンＢの個数分削除する
for (nDel = document.frmSample.lstsel2.options.length -1; nDel >= 0 ; nDel--)
{
document.frmSample.lstsel2.options[nDel] = null;
}
}
function Clearsel3()
{
//現在のプルダウンＣの個数分削除する
for (nDel = document.frmSample.lstsel3.options.length -1; nDel >= 0 ; nDel--)
{
document.frmSample.lstsel3.options[nDel] = null;
}
}
function CreateList2()
{
var nSelectval;
Clearsel2();
Clearsel3();

nSelectval = document.frmSample.lstsel1.value;
if (nSelectval == "ミカン")
{
Create(document.frmSample.lstsel2, strmikan);
}

if (nSelectval == "ブドウ")
{
Create(document.frmSample.lstsel2, strbudou);
}
if (nSelectval == "サクランボ")
{
Create(document.frmSample.lstsel2, strsakuranbo);
}
CreateList3();
}
function CreateList3()
{
var nSelectval;
Clearsel3();

nSelectval = document.frmSample.lstsel2.value;
if (nSelectval == "温州")
{
Create(document.frmSample.lstsel3, strunsyu);
}
if (nSelectval == "甘夏")
{
Create(document.frmSample.lstsel3, stramanatu);
}
if (nSelectval == "八朔")
{
Create(document.frmSample.lstsel3, strhassaku);
}
if (nSelectval == "伊予柑")
{
Create(document.frmSample.lstsel3, striyokan);
}

if (nSelectval == "デラウェア")
{
Create(document.frmSample.lstsel3, strdela);
}
if (nSelectval == "巨峰")
{
Create(document.frmSample.lstsel3, strkyoho);
}
if (nSelectval == "マスカット")
{
Create(document.frmSample.lstsel3, strmascut);
}
if (nSelectval == "高砂")
{
Create(document.frmSample.lstsel3, strtakasago);
}
if (nSelectval == "佐藤錦")
{
Create(document.frmSample.lstsel3, strsatou);
}
if (nSelectval == "ナポレオン")
{
Create(document.frmSample.lstsel3, strhnapoleon);
}

}
//この関数はIEのみです。NNを検討する場合はサンプル4-11をご覧ください。
function Create(objList, objArray)
{
var nMax = objArray.length;
var nLoop = 0;
for (nLoop = 0; nLoop < nMax; nLoop++)
{
var oAdd = document.createElement("OPTION");
oAdd.text = objArray[nLoop];
oAdd.value = objArray[nLoop];
objList.add(oAdd);
}
}

//-->
</script>
</HEAD>
<BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0" onLoad="CreateList()">
<center>
<FORM name="frmSample">
品名：<SELECT size="1" name="lstsel1" onChange="CreateList2()"></SELECT><BR>
銘柄：<SELECT size="1" name="lstsel2" onChange="CreateList3()"></SELECT><BR>
単価：<SELECT size="1" name="lstsel3" ></SELECT>
</center>

</BODY>
</HTML>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
サンプルを参考にセレクト4つで作成することができました。
本当に、感謝いたします。

通報する
お礼日時：2005/06/06 09:42

No.2

  • 回答者： kokorone
  • 回答日時：

基本的には繰り返しになりますが、注意事項があります。



ＳＥＬＥＣＴ１　ＳＥＬＥＣＴ２　ＳＥＬＥＣＴ３
ミカン　　　　　温州　　　　　　￥３００
　　　　　　　　　　　　　　　　￥３１０
　　　　　　　　　　　　　　　　￥３２０
　　　　　　　　甘夏　　　　　　￥３５０
　　　　　　　　　　　　　　　　￥３６０
　　　　　　　　八朔　　　　　　￥３７０
　　　　　　　　　　　　　　　　￥３８０
ブドウ　　　　　デラウェア　　　￥４００
　　　　　　　　　　　　　　　　￥４１０
　　　　　　　　巨峰　　　　　　￥４５０
　　　　　　　　　　　　　　　　￥４６０
　　　　　　　　　　　　　　　　￥４７０
サクランボ　　　佐藤錦　　　　　￥５００
　　　　　　　　　　　　　　　　￥５１０
　　　　　　　　高砂　　　　　　￥５２０
　　　　　　　　　　　　　　　　￥５２５
　　　　　　　　ナポレオン　　　￥５３０
　　　　　　　　　　　　　　　　￥５５０

と言うように、上位の選択肢により、表示する内容・
件数が変化しますので、表示データをＴＡＢＬＥ化
すると、いいでしょうね。
また、上位の選択肢が変更された場合、最下層の選
択肢までを初期化することを忘れないでください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございます。
しかし、JavaScript初心者なもので
大変申し訳ありませんが、
参考URLやサンプルのURLなどがありましたら
大変助かります。

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

通報する
お礼日時：2005/06/03 13:33

No.1

  • 回答者： kokorone
  • 回答日時：

>セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する方法は大体理解したのですが、


どう、理解されたのでしょうか？

OnChangeで次のselectを初期化・オプション追加
ですよね。

ということは・・・・・・
何がわからないのか、わかりません。

この回答への補足

申し訳ありません、付け足します。
サンプルをもとに、こんな感じで作ってみました。

----------------------------------------
<html>
<head>
<title>入力フォーム</title>

<script language="JavaScript"><!--
menuItem = [[""],["---","TEST1","TEST2","TEST3"]];
function setMenuItem(n)
{
　len = document.myForm.Server.options.length;
　for (i=0; i<len; i++)
　{
　　document.myForm.Server.options[i] = null;
　}
　for (i=0; i<menuItem[n].length; i++)
　{
　　document.myForm.Server.options[i] = new Option(menuItem[n][i],menuItem[n][i]);
　}
}
// --></script>

<script language="JavaScript"><!--
modelItem = [[""],["---","sjpx011","sjpx0112"],["---","tjpx232"]];
function setModelItem(n)
{
　len = document.myForm.Model.options.length;
　for (i=0; i<len; i++)
　{
　　document.myForm.Model.options[i] = null;
　}
　for (i=0; i<ModelItem[n].length; i++)
　{
　　document.myForm.Model.options[i] = new Option(modelItem[n][i],modelItem[n][i]);
　}
}
// --></script>

</head>
<body>
<form name="myForm">
<select name="Test" onChange="setMenuItem(this.selectedIndex)">
<option value="">---</option>
<option value="CASE1">CASE1</option>
</select>
<select name="Server" onChange="setModelItem(this.selectedIndex)">
<option value="">---</option>
</select>
<select name="Model">
<option value="">---</option>
</select>
<select name="Rev">
<option value="">---</option>
</select>
</form>
</body>
</html>
----------------------------------------
現状ですと、
"Test"を選択→"Server"から選択→"Model"
と言うのを
"Test"→"Server"→"Model"→"Rev"をひも付かせたいのですが、これ以上の分岐がよくわかりません。
もう一つ同じよなスクリプトを記述するだけで良いのでしょうか？
それか、もっとよい方法があるのでしょうか？

以上、よろしくお願いいたします。

補足日時：2005/06/03 09:44
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報