前提・実現したいこと
JavaScript初心者です。
質問の記載が見にくかったら申し訳ないですが、ご教示いただけるとうれしいです。
1つのラジオボタンと複数のリストボックスが連動するコードを作成しています。
詳しくは下記のとおりです。
・ラジオボタンは、初期値がある場合とない場合の2パターンがある。
・ラジオボタンに初期値がある場合は、リストボックスは初期表示時から連動させる。
・連動条件はラジオボタンで選んだ数字が11以下であれば、リストボックスは「11」で始まる要素のみ表示し、ラジオボタンで55を選んだ場合のみ、リストボックスは「55」で始まる要素のみ表示する。
・リストボックスの要素を変化させる際は、text部分を見る。
・リストボックスは複数あるが、ラジオボタンと連動させる際の要素を変化させる処理はすべて同じ。
発生している問題
リストボックスの要素は、detachでいったん全要素を隔離(配列に保持)し、appendで戻す処理を考えてコードを記載したが、うまくいきません。
該当のソースコード
Javascript
1 const id_radio = 'e_1'; /*ラジオボタンのid*/ 2 const id_list = ['e_2','e_3','e_4']; /*連動するリストボックスのid*/ 3 const key1 = '11'; /*リストボックスの要素を変更する際に利用する文字列*/ 4 const key2 = '55'; 5 var befor_radio = ''; /*changeイベント検知前のラジオボタンの値*/ 6 var list_all = {}; /*連動するリストボックスの要素を格納する配列*/ 7$(function() { 8 window.onload = function() { 9 $.each(id_list, function(index, value){ 10 list_all [index] = $('#'+value).find('option').not(':first').detach(); /*すべてのリストボックスのoptionを退避*/ 11 }); 12 var befor_radio = $('[name="' + id_radio +'"]:checked').val(); 13 chengeOption(befor_radio); 14 } 15 function chengeOption(radio){ /*ラジオボタンの値を見てリストボックスの要素を変更*/ 16 if(radio ===""){ /*初期値なし*/ 17 $.each(id_list, function(index, value){ 18 $('#'+ value).append(list_all[value]); /*配列から要素をすべて戻す*/ 19 }) 20 } else if (radio == 5){ /*ラジオボタン 5*/ 21 $.each(id_list, function(index, value){ 22 $('#'+ value).append(list_all[value]); /*配列から要素をすべて戻してから*/ 23 list_all[value] = $('#'+ value).find('option').filer(function(index){ 24 return $(this).text().startsWith(key1); 25 }).detach(); /*不要な要素を再び配列に退避*/ 26 }) 27 } else if (radio < 5){ /*ラジオボタン 1~4*/ 28 $.each(id_list, function(index, value){ 29 $('#'+ value).append(list_all[value]); /*配列から要素をすべて戻してから*/ 30 list_all[value] = $('#'+ value).find('option').filer(function(index){ 31 return $(this).text().startsWith(key2); 32 }).detach(); /*不要な要素を再び配列に退避*/ 33 }) 34 } 35 } 36 $('[name=' + id_radio+ ']').change(function(){ 37 /*ラジオボタンを押下したときの処理*/ 38 }) 39})
html
1<head></head> 2<body> 3 <form> 4 <tr> 5 <th> 6 <pre>ラジオボタン</pre> 7 </th> 8 <td> 9 <label><input type="radio" id="e_1_1" name="e_1" value="1"><span id="l_1_1">3</span></label> 10 <label><input type="radio" id="e_1_2" name="e_1" value="2"><span id="l_1_2">5</span></label> 11 <label><input type="radio" id="e_1_3" name="e_1" value="3"><span id="l_1_3">8</span></label> 12 <label><input type="radio" id="e_1_4" name="e_1" value="4"><span id="l_1_4">11</span></label> 13 <label><input type="radio" id="e_1_5" name="e_1" value="5"><span id="l_1_5">55</span></label> 14 </td> 15 </tr> 16 <tr> 17 <th> 18 <pre>リストボックス1(連動)</pre> 19 </th> 20 <td> 21 <label> 22 <select id="e_2" name="e_2"> 23 <option value="">選択してください</option> 24 <option id="e_2_1" value="1">11 A</option> 25 <option id="e_2_2" value="2">55 A1</option> 26 <option id="e_2_3" value="3">55 A2</option> 27 <option id="e_2_4" value="14">11 B1</option> 28 <option id="e_2_5" value="15">11 B2</option> 29 <option id="e_2_6" value="5">55 B1</option> 30 <option id="e_2_7" value="6">55 B2</option> 31 <option id="e_2_8" value="16">11 C1</option> 32 <option id="e_2_9" value="17">11 C2</option> 33 <option id="e_2_10" value="8">55 C1</option> 34 <option id="e_2_11" value="9">55 C2</option> 35 <option id="e_2_12" value="10">55 D</option> 36 <option id="e_2_13" value="11">11 E</option> 37 <option id="e_2_14" value="18">11 F1</option> 38 <option id="e_2_15" value="19">11 F1</option> 39 <option id="e_2_16" value="20">55 F1</option> 40 <option id="e_2_17" value="21">55 F2</option> 41 </select> 42 </label> 43 </td> 44 </tr> 45 <tr> 46 <th> 47 <pre>リストボックス2(連動)</pre> 48 </th> 49 <td> 50 <label> 51 <select id="e_3" name="e_3"> 52 <option value="">選択してください</option> 53 <option id="e_3_1" value="1">11 A</option> 54 <option id="e_3_2" value="2">55 A1</option> 55 <option id="e_3_3" value="3">55 A2</option> 56 <option id="e_3_4" value="14">11 B1</option> 57 <option id="e_3_5" value="15">11 B2</option> 58 <option id="e_3_6" value="5">55 B1</option> 59 <option id="e_3_7" value="6">55 B2</option> 60 <option id="e_3_8" value="16">11 C1</option> 61 <option id="e_3_9" value="17">11 C2</option> 62 <option id="e_3_10" value="8">55 C1</option> 63 <option id="e_3_11" value="9">55 C2</option> 64 <option id="e_3_12" value="10">55 D</option> 65 <option id="e_3_13" value="11">11 E</option> 66 <option id="e_3_14" value="18">11 F1</option> 67 <option id="e_3_15" value="19">11 F1</option> 68 <option id="e_3_16" value="20">55 F1</option> 69 <option id="e_3_17" value="21">55 F2</option> 70 </select> 71 </label> 72 </td> 73 </tr> 74 <tr> 75 <th> 76 <pre>リストボックス3(連動)</pre> 77 </th> 78 <td> 79 <label> 80 <select id="e_4" name="e_4"> 81 <option value="">選択してください</option> 82 <option id="e_4_1" value="1">11 A</option> 83 <option id="e_4_2" value="2">55 A1</option> 84 <option id="e_4_3" value="3">55 A2</option> 85 <option id="e_4_4" value="14">11 B1</option> 86 <option id="e_4_5" value="15">11 B2</option> 87 <option id="e_4_6" value="5">55 B1</option> 88 <option id="e_4_7" value="6">55 B2</option> 89 <option id="e_4_8" value="16">11 C1</option> 90 <option id="e_4_9" value="17">11 C2</option> 91 <option id="e_4_10" value="8">55 C1</option> 92 <option id="e_4_11" value="9">55 C2</option> 93 <option id="e_4_12" value="10">55 D</option> 94 <option id="e_4_13" value="11">11 E</option> 95 <option id="e_4_14" value="18">11 F1</option> 96 <option id="e_4_15" value="19">11 F1</option> 97 <option id="e_4_16" value="20">55 F1</option> 98 <option id="e_4_17" value="21">55 F2</option> 99 </select> 100 </label> 101 </td> 102 </tr> 103 </form> 104</body>
試したこと
どうやら、要素のdetachはできているが、appendが出来ていないようです。
NG箇所の特定ができず困っています。
補足情報(FW/ツールのバージョンなど)
IE11で利用します。