前提・実現したいこと
*4/19 タグなどを修正しました
どうぞよろしくお願いいたします。
添付の図のように、セレクトボックスの選択によって
表示/非表示を切り替えるコンテンツを作りたいです。
(青い部分は未選択、非表示の部分です)
発生している問題
こちらのページを参考に作ってみましたが、1つのフォームにつき1つのスクリプトの場合は
正常に動作しますが、複数設置すると2つ目以降が動作しません。
該当のソースコード
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function(e){ document.querySelector('[name=hoge1]','[name=hoge2]').addEventListener('change',function(e){ var t=e.target; var v=t.value; var p=t.parentNode.parentNode.parentNode; Array.prototype.forEach.call(p.querySelectorAll('li[id]'),function(x){ var dsp=''; if(x.getAttribute('id')!==v+'-select'){ dsp='none'; } x.style.display=dsp; }); }); }); </script> </head> <body> <div id="box1"> <select id="changeSelect" name="hoge1"> <option value="">選択肢1</option> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> </select> <ul> <li id="option1-select" style="display:none">「選択肢1」option1の表示内容</li> <li id="option2-select" style="display:none">「選択肢1」option2の表示内容</li> <li id="option3-select" style="display:none">「選択肢1」option3の表示内容</li> </ul> </div> <div id="box2"> <select id="changeSelect" name="hoge2"> <option value="">選択肢2</option> <option value="option4">option4</option> <option value="option5">option5</option> <option value="option6">option6</option> </select> <ul> <li id="option4-select" style="display:none">「選択肢2」option4の表示内容</li> <li id="option5-select" style="display:none">「選択肢2」option5の表示内容</li> <li id="option6-select" style="display:none">「選択肢2」option6の表示内容</li> </ul> </div> </body> </html>
試したこと
ご回答を受け、表示箇所のidの中身を変更してみましたが
変わらず2つ目のフォームは動作しません。
また前回の質問でベストアンサーに選ばせて頂いたタグを応用できるかと
試してみましたが、動作しませんでした。
以下、応用を試してみたコードです。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> HTMLElement.prototype.trigger=function(eventStr){ if (document.createEvent) { var e = document.createEvent("HTMLEvents"); e.initEvent(eventStr, true, true ); return this.dispatchEvent(e); } else { var e = document.createEventObject(); return this.fireEvent("on"+eventStr, e); } }; window.addEventListener('DOMContentLoaded', function(e){ Array.prototype.forEach.call(document.querySelectorAll('[data-target]'),function(x){ x.addEventListener('change',function(e){ Array.prototype.forEach.call(document.querySelectorAll('[name='+e.target.getAttribute("name")+']'),function(y){ document.querySelector('#'+y.getAttribute('data-target')).style.display=(y.checked?"block":"none"); }); }); x.trigger("change"); }); }); </script> </head> <body> <div> <select> <option value="">選択肢1</option> <option value="option1" name="r1" data-target="box01">option1</option> <option value="option2" name="r2" data-target="box02">option2</option> <option value="option3" name="r3" data-target="box03">option3</option> </select> <ul> <li id="box01">「選択肢1」option1の表示内容</li> <li id="box02">「選択肢1」option2の表示内容</li> <li id="box03">「選択肢1」option3の表示内容</li> </ul> </div> </body> </html>
スクリプトやタグなどは、セレクトボックスを使用する以外の点については
どのように変わっても構いません。
メンテナンスの観点から、できる限りコードは少ない方が嬉しいです。
また、表示/非表示が切り替わったコンテンツの中に同じような
セレクトボックスを作り、入れ込構造のようにできればなお助かります。
引き続き、どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー