- ベストアンサー
javascriptで連動するセレクトボックス
- ショッピングサイトを構築しており、選択した商品の金額を表示させたいと考えています。
- 大分類・中分類・小分類の3種類のセレクトボックスを用意し、選んだ商品1つだけの金額をDIV要素に表示させたいのですが、思うように動作せず行き詰ってしまいました。
- 現状は食べ物-果物の、リンゴかオレンジは正しく表示されるのですが、他のものになるとセレクトボックスがうまく連動しない状況です。
- chocotarosu
- お礼率93% (14/15)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
上位階層の変化が、段階的に末端まで伝達される仕組みが必要です。 ちょっとアレンジを入れて書いてみました。 <!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>
お礼
Ogre7077様、貴重なお時間を割いて知恵を練っていただき、ありがとうございます。 お礼が遅くなりましたが、自分がやろうとしていたこと以上の作りになっており、 使い勝手もスムーズなのでとても感謝しています。 自分のレベルでは理解できない箇所に丁寧にコメントもあり、とても勉強になります。 実際に自分で手を加えてみて、もう少しプログラムの流れに理解を深めたいと思います。 この度はどうもありがとうございました！