プロが教えるわが家の防犯対策術！

セレクトメニューの選択項目によって、もう１つのセレクトメニューの項目と項目数を変更する

解決済

  • 質問者：pig1320
  • 質問日時：
  • 回答数：2件

もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。
たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： lead1976
  • 回答日時：

試しに作ってみました。

こういう感じでしょうか。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
menu2txt = new Array(); // 2つ目のメニューの項目表示テキスト用配列
menu2val = new Array(); // 2つ目のメニューのvalue値用配列
menu2txt["a"] = new Array();
menu2val["a"] = new Array();
menu2txt["b"] = new Array();
menu2val["b"] = new Array();
menu2txt["c"] = new Array();
menu2val["c"] = new Array(); // 二次配列作成

menu2txt["a"][0] = "項目A1";
menu2val["a"][0] = "A1";
menu2txt["a"][1] = "項目A2";
menu2val["a"][1] = "A2";
menu2txt["a"][2] = "項目A3";
menu2val["a"][2] = "A3";
menu2txt["a"][3] = "項目A4";
menu2val["a"][3] = "A4";
menu2txt["a"][4] = "項目A5";
menu2val["a"][4] = "A5";

menu2txt["b"][0] = "項目B1";
menu2val["b"][0] = "B1";
menu2txt["b"][1] = "項目B2";
menu2val["b"][1] = "B2";
menu2txt["b"][2] = "項目B3";
menu2val["b"][2] = "B3";

menu2txt["c"][0] = "項目C1";
menu2val["c"][0] = "C1";
menu2txt["c"][1] = "項目C2";
menu2val["c"][1] = "C2";
menu2txt["c"][2] = "項目C3";
menu2val["c"][2] = "C3";
menu2txt["c"][3] = "項目C4";
menu2val["c"][3] = "C4";
menu2txt["c"][4] = "項目C5";
menu2val["c"][4] = "C5";
// 以上、セレクトメニューの表示項目とvalue値を配列に格納

function set_menu(){
key = document.f1.menu1.value;
while (document.f1.menu2.options[0]){
document.f1.menu2.options[0] = null; // 2つ目のメニューを消去
}
for (i=0; i<menu2txt[key].length; i++){
document.f1.menu2.options[i] = new Option(menu2txt[key][i],menu2val[key][i]);
// 2つ目のメニューの項目を生成・表示テキストとvalue値を設定
}
}

window.onload = set_menu; // ページロード時にmenu1の初期値でmenu2を設定
// -->
</script>
</head>
<body>

<form action="#" name="f1">
<div>
<select name="menu1" onchange="set_menu()">
<option value="a">Aタイプ</option>
<option value="b">Bタイプ</option>
<option value="c">Cタイプ</option>
</select>
<select name="menu2">
</select>
</div>
</form>

</body>
</html>

参考になれば…
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。完璧です！
二次配列を使うのはなんとなくわかったのですが、行き詰っていました。
本当にありがとうございました。

通報する
お礼日時：2004/09/09 22:37

No.1

  • 回答者： ryou0607
  • 回答日時：

selectのonchangeで呼び出す関数



select.length=0;//中身の初期化
select[0].value=値;//一つ目の項目の設定
select[0].text=表示文字列;//一つ目の項目の設定
select[1].value=値;//二つ目の項目の設定
select[1].text=表示文字列;//二つ目の項目の設定

こんな感じのものを作ればできますよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
二次配列を使うのですよね？そこまではわかるのですが、そこからがちょっと・・・。
まだまだ勉強が足りないのかもしれません・・・。

通報する
お礼日時：2004/09/09 22:36

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報