こんにちは。
セレクトメニューの選択項目に応じて、もう1つのセレクトメニューの内容を変更する方法は大体理解したのですが、
さらにもう一つ、+もう一つ・・・とセレクトメニューの項目をリンクさせて変更することは可能でしょうか?
例えば、
セレクトメニュー(1) 選択
↓ ジャンプ
セレクトメニュー(2) 選択
↓ ジャンプ
セレクトメニュー(3) 選択
↓ ジャンプ
セレクトメニュー(4) 選択
↓
検索用CGI実行 クリック
というように選ばれた各項目ごとに次のセレクトメニューにジャンプして項目の変更を行いたいです。
参考サンプル等、
どなたか情報をお持ちの方がおりましたら、
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
こんな感じになります。
サンプルのセレクトは3つです。
初心者ということで甘えず、セレクト4つ
に対応できるよう、頑張ってください。
★★★★★★★★★★★★★★★★
<!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()
{
//現在のプルダウンBの個数分削除する
for (nDel = document.frmSample.lstsel2.options.length -1; nDel >= 0 ; nDel--)
{
document.frmSample.lstsel2.options[nDel] = null;
}
}
function Clearsel3()
{
//現在のプルダウンCの個数分削除する
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>
No.2
- 回答日時:
基本的には繰り返しになりますが、注意事項があります。
SELECT1 SELECT2 SELECT3
ミカン 温州 ¥300
¥310
¥320
甘夏 ¥350
¥360
八朔 ¥370
¥380
ブドウ デラウェア ¥400
¥410
巨峰 ¥450
¥460
¥470
サクランボ 佐藤錦 ¥500
¥510
高砂 ¥520
¥525
ナポレオン ¥530
¥550
と言うように、上位の選択肢により、表示する内容・
件数が変化しますので、表示データをTABLE化
すると、いいでしょうね。
また、上位の選択肢が変更された場合、最下層の選
択肢までを初期化することを忘れないでください。
早速のご回答ありがとうございます。
しかし、JavaScript初心者なもので
大変申し訳ありませんが、
参考URLやサンプルのURLなどがありましたら
大変助かります。
よろしくお願いいたします。
No.1
- 回答日時:
>セレクトメニューの選択項目に応じて、もう1つのセレクトメニューの内容を変更する方法は大体理解したのですが、
どう、理解されたのでしょうか?
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"をひも付かせたいのですが、これ以上の分岐がよくわかりません。
もう一つ同じよなスクリプトを記述するだけで良いのでしょうか?
それか、もっとよい方法があるのでしょうか?
以上、よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルからビジオのリンク貼り付け 1 2023/03/30 17:51
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- 防犯カメラ・監視カメラ・小型カメラ Windowsのカメラ機能。設定した通りのfpsでの撮影ができず、コマ落ち動画になる。修正するには? 2 2023/01/29 09:50
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- Access(アクセス) access フォーム 大分類、小分類 1 2022/08/11 18:03
- 一眼レフカメラ 同じレンズなのに、選択できるF値が、焦点距離で変わるのはなぜですか? 標準で選択できる最大F値は22 3 2022/06/02 20:58
- Excel(エクセル) EXCELピボットテーブル(複数アイテム) 1 2023/04/27 12:15
- 飲食店・レストラン 飲食店で食べ物を選ぶのに時間をかける友人。男です。例えばレストランでメニューを選ぶ際、私は30秒あれ 3 2022/10/15 08:14
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Visual Basic(VBA) VSコードでバックスペースキーが効かない(パイソン) 1 2022/11/09 04:00
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字を一文字ずつ表示
-
XMLでのAttributeを持ったNode...
-
responseTextについて
-
DOM要素を削除しても、イベント...
-
FireFoxのjavascriptで自動でキ...
-
Latexに関する質問です。
-
JavaScript window.openで開く...
-
javascriptの基本的なことだと...
-
複数のプルダウンメニューの選...
-
乗換案内 VBAで操作したい
-
javascript:(function(q, a, z)...
-
正規表現による日本語の置換
-
ラジオボタンでreadonlyの切替え
-
ダブルでコンボボックスについて
-
ポップアップウインド
-
ドロップダウンメニューを短縮...
-
iframe内のページがロードし続ける
-
TexでΣの添え字の位置直し
-
VBの記述方法はVBAと同じなので...
-
google apps scriptの終了のさせ方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
文字を一文字ずつ表示
-
DOM要素を削除しても、イベント...
-
FireFoxのjavascriptで自動でキ...
-
javascriptの基本的なことだと...
-
このjavascriptのif文、条件式...
-
XMLでのAttributeを持ったNode...
-
Latexに関する質問です。
-
Null またはオブジェクトではあ...
-
VBAでIEのボタンを押してメッセ...
-
乗換案内 VBAで操作したい
-
javascriptのdocument.allにつ...
-
TexでΣの添え字の位置直し
-
showModalDialogで開いた画面を...
-
ラジオボタンでreadonlyの切替え
-
excle VBA とweb上の検索を利用...
-
LaTeX:数式を等号揃えにする方法
-
TEXTAREA内の改行位置をinnerHT...
-
iframe内のページ(複数)を変更
-
ブラウザのウィンドウサイズに...
おすすめ情報