前提・実現したいこと
①1行に2つのプルダウンメニュー表示させる。
②プルダウンメニューは1つの目の選択に応じて、2つ目の選択しが連動する。
③行数は動的で「ボタンを押す」ことで増減する。
上記のような一覧表をhtmlとjavascriptで作成したいと考えております。
発生している問題・エラーメッセージ
②プルダウンメニューの連動と③行数の増減
それぞれを実装することはできたのですが、それぞれを両立させようとすると上手くいきません。
エラーメッセージ
ロジック判定が行えるようなエディターを使用できないため、エラーは確認できておりません。
おそらく行の追加時に1行目の要素だけに連動しているようなので、
変数の定義の仕方に問題があるのではないかと考えております。
該当のソースコード
<title>sample</title> <meta charset="UTF-8"> </head> <table border="1" cellspacing="2" cellpadding="2"> <tr> <th class="SeiTH">No.</th> <th class="SeiTH">追加/削除</th> <th class="SeiTH" nowrap align="left">選択肢1</th> <th class="SeiTH" nowrap align="left">選択肢2</th> </tr> <tbody id="list_main" > <tr> <td class="%tdclass%">%no%</td> <td class="%tdclass%"> <input type="button" value="+" onclick="addList(this);" /> <input type="button" value="-" onclick="removeList(this);" /> </td> <td class="%tdclass%"> <select name="ah_keihi" id="ah_keihi" onchange="resetValue();changeCategory()">%Y0003% <option value="0">≪選択してください≫</option> <option value="1">近郊交通費</option> <option value="2">出張旅費</option> <option value="3">その他</option> </select> </td> <td class="%tdclass%"> <select name="sh_keihi" id="sh_keihi">%Y0004% <option value="0">≪選択してください≫</option></select> </td> </table> <script language="JavaScript" type="text/javascript"> function resetValue() { // 好きな食べ物の選択肢 sh_keihi = document.getElementById("sh_keihi"); // ジャンルの選択肢が変更された際の動作 ah_keihi = document.getElementById("ah_keihi"); ah_keihi.onchange = changeCategory; } // ジャンルの選択肢が変更された際の動作 function changeCategory() { // 変更後のカテゴリを取得 var changedCategory = ah_keihi.value; if (changedCategory == "1") { setLocalTrans(); } else if (changedCategory == "2") { setOutTrans(); } else { setOthers(); } } function setLocalTrans() { sh_keihi.textContent = null; // 選択肢1が1 var lTrans = [ {cd:"", label:"選択して下さい"}, {cd:"0", label:"あ"}, {cd:"1", label:"い"}, ]; lTrans.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; sh_keihi.appendChild(op); }); } function setOutTrans() { sh_keihi.textContent = null; // 選択肢1が2 var oTrans = [ {cd:"", label:"選択して下さい"}, {cd:"2", label:"か"}, {cd:"3", label:"き"}, ]; oTrans.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; sh_keihi.appendChild(op); }); } function setOthers() { sh_keihi.textContent = null; //選択肢1が3 var oOthers = [ {cd:"", label:"選択して下さい"}, {cd:"4", label:"さ"}, {cd:"5", label:"し"}, ]; oOthers.forEach(function(value) { var op = document.createElement("option"); op.value = value.cd; op.text = value.label; sh_keihi.appendChild(op); }); } function addList(obj) { // tbody要素に指定したIDを取得し、変数「tbody」に代入 var tbody = document.getElementById('list_main'); // objの親の親のノードを取得し(つまりtr要素)、変数「tr」に代入 var tr = obj.parentNode.parentNode; // tbodyタグ直下のノード(行)を複製し、変数「list」に代入 var list = tbody.childNodes[0].cloneNode(true); // 複製したノード「list」を直後の兄弟ノードの上に挿入 // (「tr」の下に挿入) tbody.insertBefore(list, tr.nextSibling); } function removeList(obj) { // tbody要素に指定したIDを取得し、変数「tbody」に代入 var tbody = document.getElementById('list_main'); // objの親の親のノードを取得し(つまりtr要素)、変数「tr」に代入 var tr = obj.parentNode.parentNode; // 「tbody」の子ノード「tr」を削除 tbody.removeChild(tr); } </script> コード
ソースコード
### 試したこと 複製の過程に問題があるのでは、と考えており、 関数の記載場所などを変えてみたりはしたのですが、うまくいきませんでした。 ※+ボタンを押して作成される、追加行はの選択肢2は、1行目の選択肢の選択の結果によるもので固定されてしまいます。 作成の都度選択肢1の選択結果に応じて、選択が変動するプログラムを意図しております。 #![イメージ説明](8ccfb8787e08dd07c7976dc9a157cf82.png) 不勉強で大変恐縮ですが、ご助力賜れますと幸いに存じます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/22 15:44 編集
2021/02/25 23:59
2021/02/26 10:30 編集