私はJavaScriptを始めたばかりで、文法が分かっていなかったり、記法が汚いかもしれませんがご容赦ください!
個人情報入力フォーム的なものを作りながらJavaScriptの勉強をしています。
現在は、学歴の入力フォームを作っています。
仕様は、「中学」「高校」「大学」「行ってない」の4つのラジオボタンと、学校名が入ったセレクトボックスです。
セレクトボックスのデータは、ラジオボタンで学歴をクリックすると学歴ごとにJSONデータを読み込む感じです。
質問
https://q-az.net/without-jquery-each/
このページを参考にしながら、$.each()をfor文で書き換えたのですが上の写真で示したように動作しません。。
$.each文とfor文は以下です
コード全体は下部に記載しています。
for文で書くと下の写真のようになります。
検証を使ってもエラー文は出ませんでした。
$.each()文のコード
JavaScript
1 case 1: //高校 2 $.getJSON("school.json", {name: "chara"}, function(data) { 3 var list = data.highschool; 4 $.each(list, function(i) { 5 document.form_signin.school.options[i] = new Option(list[i], list[i]); 6 }); 7 }); 8
for文に書き換えたコード
JavaScript
1case 1: //高校 2 $.getJSON("school.json", {name: "chara"}, function(data) { 3 var list = data.highschool; 4 for(var i=1; i<=list.length; i++ ) { 5 document.form_signin.school.options[i] = new Option(list[i], list[i]); 6 } 7 });
何が間違っているかも分かりません。
どなたかアドバイスよろしくお願いします!!!
以下は、コードの全体です。
javascript
1function schoolSelect(value) { 2 //セレクトボックスの初期化 3 arrayNum = document.form_signin.school.options.length; 4 for(var i=1; i<arrayNum; i++) { 5 document.form_signin.school.options[1] = null; 6 } 7 8 //選択した学校のリストをjsonファイルからAJAXで取得し、セレクトボックスに追加 9 switch(parseInt(value, 10)) { 10 case 0: //中学 11 $.getJSON("school.json", {name: "chara"}, function(data) { 12 var list = data.juniorhighschool; 13 $.each(list, function(i) { 14 document.form_signin.school.options[i] = new Option(list[i], list[i]); 15 }); 16 }); 17 break; 18 19 case 1: //高校 20 $.getJSON("school.json", {name: "chara"}, function(data) { 21 var list = data.highschool; 22 $.each(list, function(i) { 23 document.form_signin.school.options[i] = new Option(list[i], list[i]); 24 }); 25 }); 26 27 // for(var i=1; i<=list.length; i++ ) { 28 // document.form_signin.school.options[i] = new Option(list[i], list[i]); 29 // }; 30 31 break; 32 33 case 2: //大学 34 $.getJSON("school.json", {name: "chara"}, function(data) { 35 var list = data.university; 36 $.each(list, function(i) { 37 document.form_signin.school.options[i] = new Option(list[i], list[i]); 38 }); 39 }); 40 break; 41 42 default: break; 43 } 44}
html
1<form class="form-signin" name="form_signin"> 2 <tr> 3 <th>最終学歴<span style="color:red;">*</span></th> 4 <td> 5 <input type="radio" name="career" id="junior" value="0" onchange="schoolSelect(this.value)" ><label for="junior">中学</label> 6 <input type="radio" name="career" id="high-school" value="1" onchange="schoolSelect(this.value)" ><label for="high-school">高校</label> 7 <input type="radio" name="career" id="university" value="2" onchange="schoolSelect(this.value)" ><label for="university">大学</label> 8 <input type="radio" name="career" id="no-career" value="3" onchange="schoolSelect(this.value)" ><label for="no-career">行ってない</label> 9 <br> 10 学校名: 11 <select id="school" class="w250" onblur="careerCheck()" > 12 <option value="0" >-選択-</option> 13 </select> 14 <br> 15 <span id="careerError">*必須項目です</span> 16 </td> 17 </tr> 18</form>
json
1{"juniorhighschool":{ 2"1":"大阪市立桜宮中学校", 3"2":"大阪市立高倉中学校", 4"3":"大阪市立友渕中学校", 5"4":"大阪市立都島中学校", 6"5":"大阪市立淀川中学校", 7"6":"大阪市立下福島中学校", 8"7":"大阪市立野田中学校", 9"8":"大阪市立八阪中学校", 10"9":"大阪市立春日出中学校", 11"10":"大阪市立此花中学校", 12"11":"大阪市立梅香中学校", 13"12":"大阪市立西中学校", 14"13":"大阪市立花乃井中学校 15}, 16"highschool":{ 17"1":"大阪市立都島工業高等学校", 18"2":"大阪市立都島第二工業高等学校", 19"3":"大阪市立東高等学校", 20"4":"大阪市立桜宮高等学校", 21"5":"大阪府立西野田工科高等学校", 22"6":"大阪市立咲くやこの花高等学校", 23"7":"大阪市立西高等学校", 24"8":"大阪府立市岡高等学校", 25"9":"大阪府立港高等学校", 26"10":"大阪府立泉尾高等学校", 27}, 28"university":{ 29"1":"大阪大学", 30"2":"大阪教育大学", 31"3":"大阪市立大学", 32"4":"大阪府立大学", 33"5":"藍野大学", 34"6":"LCA大学院大学", 35"7":"追手門学院大学", 36"8":"大阪青山大学", 37"9":"大阪医科大学", 38"10":"大阪大谷大学" 39} 40} 41
回答2件
あなたの回答
tips
プレビュー