※ ChatGPTを利用し、要約された質問です（原文：javascriptで連動するセレクトボックス）
javascriptで連動するセレクトボックス
このQ&Aのポイント
ショッピングサイトを構築しており、選択した商品の金額を表示させたいと考えています。
大分類・中分類・小分類の3種類のセレクトボックスを用意し、選んだ商品1つだけの金額をDIV要素に表示させたいのですが、思うように動作せず行き詰ってしまいました。
現状は食べ物-果物の、リンゴかオレンジは正しく表示されるのですが、他のものになるとセレクトボックスがうまく連動しない状況です。
ショッピングサイトを構築しており、選択した商品の金額を表示させたいと考えています。
大分類・中分類・小分類の3種類のセレクトボックスを用意し、
選んだ商品1つだけの金額をDIV要素に表示させたいのですが、
思うように動作せず行き詰ってしまいました。
現状は食べ物-果物の、リンゴかオレンジは正しく表示されるのですが、
他のものになるとセレクトボックスがうまく連動しない状況です。
ソースが長くなってしまい、大変申し訳ないのですが、
どうかお知恵を貸してください。お願いいたします。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>選択した商品のみ金額を表示させる</title>
<script type = "text/javascript">
<!--
function listControl()
{
largeList = document.forms.formName.largeName;
middleList = document.forms.formName.middleName;
smallList = document.forms.formName.smallName;
No = 1;
//リストの数が異なる場合
middleList.options.length = 0;
smallList.options.length = 0;
//中分類の判定
if(largeList.options[largeList.selectedIndex].value == "食べ物"){
middleList.options[0] = new Option("果物","fruit");
middleList.options[1] = new Option("野菜","vegetable");
}
else if (largeList.options[largeList.selectedIndex].value == "飲み物"){
middleList.options[0] = new Option("スープ","soup");
middleList.options[1] = new Option("ジュース","juice");
}
//小分類の判定
if (middleList.options[middleList.selectedIndex].value == "fruit"){
smallList.options[0] = new Option("果物を選択してください");
smallList.options[1] = new Option("1.リンゴ","apple");
smallList.options[2] = new Option("2.オレンジ","orange");
}
else if (middleList.options[middleList.selectedIndex].value == "vegetable"){
smallList.options[0] = new Option("野菜を選択してください");
smallList.options[1] = new Option("3.カボチャ","pumpkin");
smallList.options[2] = new Option("4.イモ","potato");
}
else if (middleList.options[middleList.selectedIndex].value == "soup"){
smallList.options[0] = new Option("スープを選択してください");
smallList.options[1] = new Option("5.みそ汁","miso");
}
else if (middleList.options[middleList.selectedIndex].value == "juice"){
smallList.options[0] = new Option("ジュースを選択してください");
smallList.options[1] = new Option("6.ミックスジュース","mix");
smallList.options[2] = new Option("7.グレープフルーツ","grapefruit");
smallList.options[3] = new Option("8.トマトジュース","tomato");
}
}
//div要素を非表示にする
function resetBtn(){
for(i=1; i<=8; i++){
document.getElementById("buyList"+[i]).style.display="none";
}
}
//-->
</script>
</head>
<body>
<div class="futoSelectForm">
<form name="formName">
<!--選択肢その1-->
<select name = "largeName" onChange="listControl()">
<option value = "">種類を選択してください</option>
<option value = "食べ物">食べ物</option>
<option value = "飲み物">飲み物</option>
</select>
<!--選択肢その2（選択肢の項目によって変化）-->
<select name = "middleName">
</select>
<!--選択肢その3（選択肢の項目によって変化）-->
<select name = "smallName" onchange="document.getElementById('buyList'+No).style.display='none';document.getElementById('buyList'+(No=(this.selectedIndex))).style.display='block'">
</select>
<input type="button" value="リセット" onclick="resetBtn();">
</form>
</div>
<div id="buyList0" style="display:none;"></div>
<div id="buyList1" style="display:none;">果物：1.リンゴ 120円</div>
<div id="buyList2" style="display:none;">果物：2.オレンジ 80円</div>
<div id="buyList3" style="display:none;">野菜：3.カボチャ 210円</div>
<div id="buyList4" style="display:none;">野菜：4.イモ 40円</div>
<div id="buyList5" style="display:none;">スープ：5.みそ汁 50円</div>
<div id="buyList6" style="display:none;">ジュース：7.ミックスジュース 180円</div>
<div id="buyList7" style="display:none;">ジュース：8.グレープフルーツジュース 150円</div>
<div id="buyList8" style="display:none;">ジュース：9.トマトジュース 160円</div>
</body>
</html>
お礼
Ogre7077様、貴重なお時間を割いて知恵を練っていただき、ありがとうございます。 お礼が遅くなりましたが、自分がやろうとしていたこと以上の作りになっており、 使い勝手もスムーズなのでとても感謝しています。 自分のレベルでは理解できない箇所に丁寧にコメントもあり、とても勉強になります。 実際に自分で手を加えてみて、もう少しプログラムの流れに理解を深めたいと思います。 この度はどうもありがとうございました！