javascriptで連動するセレクトボックス

解決済

質問者：chocotarosu
質問日時：2013/05/07 12:44
回答数：1件

ショッピングサイトを構築しており、選択した商品の金額を表示させたいと考えています。

大分類・中分類・小分類の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">

</script>

</head>
<body>

<div class="futoSelectForm">
<form name="formName">

<select name = "largeName" onChange="listControl()">
<option value = "">種類を選択してください</option>
<option value = "食べ物">食べ物</option>
<option value = "飲み物">飲み物</option>
</select>


<select name = "middleName">
</select>



<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>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2013/05/08 15:15

上位階層の変化が、段階的に末端まで伝達される仕組みが必要です。

ちょっとアレンジを入れて書いてみました。

<!DOCTYPE html>
<style> .hideAtFirst { display:none } </style>
<script>
window.onload = function(e){
var form = document.forms['formName'];
var namL = form.elements['largeName'];
var rest = form.elements['back'];
function each(pref, f) {
var elms = form.elements;
for (var i = 0; i < elms.length; i++) {
var s = elms[i];
if (s.name.indexOf(pref) == 0) f(s);
}
}
rest.onclick = function(ev) { namL.selectedIndex = 0; selMiddle() }; // 大分類の初期化して、下位に伝達
namL.onchange = function(ev) { selMiddle(namL.value) }; // 大分類の変更を、下位に伝達

function selMiddle(name) { // 大分類の変更を中分類に伝達
var keyword = 'middleName_' + name;
var nextval = null;
each('middleName_', function(e){
var hit = (e.name == keyword);
e.className = hit? 'showLittle': 'hideAtFirst';
if (hit) {
e.onchange = function(ev) { selSmall(e.value) };
nextval = e.value;
}
});
selSmall(nextval); // 下位に伝達
}
function selSmall(name) { // 中分類の変更を小分類に伝達
var keyword = 'smallName_' + name;
var nextval = null;
each('smallName_', function(e){
var hit = (e.name == keyword);
e.className = hit? 'showLittle': 'hideAtFirst';
if (hit) {
e.onchange = function(ev){ dispResult(e.value) };
nextval = e.value;
}
});
dispResult(nextval); // 下位に伝達
}
function dispResult(name) { // 小分類の変更を結果に伝達
var keyword = 'result_' + name;
var ress = document.getElementById('results').children;
for (var i = 0; i < ress.length; i++) {
var s = ress[i];
var hit = (s.id == keyword);
s.className = hit? 'showLittle': 'hideAtFirst';
}
}
}
</script>

<form name="formName">
<select name=largeName>
<option value="">種類を選択してください<option value="food">食べ物<option value="drink">飲み物
</select>
<select class=hideAtFirst name=middleName_food>
<option value="">食べ物を選択してください<option value=fruit>果物<option value=vegetable>野菜
</select>
<select class=hideAtFirst name=middleName_drink>
<option value="">飲み物を選択してください<option value=soup>スープ<option value=juice>ジュース
</select>
<select class=hideAtFirst name=smallName_fruit>
<option value="">果物を選択してください<option value=apple>1.リンゴ<option value=orange>2.オレンジ
</select>
<select class=hideAtFirst name=smallName_vegetable>
<option value="">野菜を選択してください<option value=pumpkin>3.カボチャ<option value=potato>4.イモ
</select>
<select class=hideAtFirst name=smallName_soup>
<option value="">スープを選択してください<option value=miso>5.みそ汁
</select>
<select class=hideAtFirst name=smallName_juice>
<option value="">ジュースを選択してください<option value=mix>6.ミックスジュース<option value=grapefruit>7.グレープフルーツ<option value=tomato>8.トマトジュース
</select>
<button name=back type=reset>リセット</button>
</form>

<div id=results>
<div id="result_apple" class=hideAtFirst>果物：1.リンゴ　120円</div>
<div id="result_orange" class=hideAtFirst>果物：2.オレンジ　80円</div>
<div id="result_pumpkin" class=hideAtFirst>野菜：3.カボチャ　210円</div>
<div id="result_potato" class=hideAtFirst>野菜：4.イモ　40円</div>
<div id="result_miso" class=hideAtFirst>スープ：5.みそ汁　50円</div>
<div id="result_mix" class=hideAtFirst>ジュース：7.ミックスジュース　180円</div>
<div id="result_grapefruit" class=hideAtFirst>ジュース：8.グレープフルーツジュース　150円</div>
<div id="result_tomato" class=hideAtFirst>ジュース：9.トマトジュース　160円</div>
</div>

- 0
- 件

通報する

この回答へのお礼

Ogre7077様、貴重なお時間を割いて知恵を練っていただき、ありがとうございます。
お礼が遅くなりましたが、自分がやろうとしていたこと以上の作りになっており、
使い勝手もスムーズなのでとても感謝しています。

自分のレベルでは理解できない箇所に丁寧にコメントもあり、とても勉強になります。
実際に自分で手を加えてみて、もう少しプログラムの流れに理解を深めたいと思います。

この度はどうもありがとうございました！

通報する

お礼日時：2013/05/08 19:20

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