質問編集履歴

最初に書いた内容かが何故か反映されてなかった為、修正

2021/02/02 10:17

投稿

after.noon.tea

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -170,11 +170,41 @@
               $('#select-pref').append(buf);
+          }
+      });
+  });
+// 2つ目の選択
-            //.append(buf)で、bufの結果を並べて出力するという書き方になるらしい
+  $('#select-pref').on('change', function () {
+      //1つ目が選ばれたら〜
+      $('#select-city option:nth-child(n+2)').remove(); // select-cityの2つ目のoptionをクリア
+    $('#select-town option:nth-child(n+2)').remove(); // select-townの2つ目のoptionをクリア
-            //#select-prefの後に、let bufの内容が繰り返しで出力されるのこのため
+    let select_prefid = $('#select-pref option:selected').val();
-            //https://www.javadrive.jp/start/stringbuilder/index1.html
+      $.getJSON('/head/grade/json/lesson2.json', function (data) {
+          let pref = data.find((p) => p.prefid === select_prefid);
+          for ( let city of pref.city ){
+              let buf = '<option value="' + city.cityid + '">' + city.cityname + '</option>';
+              $('#select-city').append(buf);
               console.log(buf);
@@ -186,41 +216,27 @@
-// 2つ目の選択
+  // 3つ目の選択
-  $('#select-pref').on('change', function () {
+  $('#select-city').on('change', function () {
-      //1つ目が選ばれたら〜
-      $('#select-city option:nth-child(n+2)').remove(); // select-cityの2つ目のoptionをクリア
-    $('#select-town option:nth-child(n+2)').remove(); // select-townの2つ目のoptionをクリア
+      $('#select-town option:nth-child(n+2)').remove(); // select-townの2つ目のoptionをクリア
-    let select_prefid = $('#select-pref option:selected').val();
+      var select_prefid = $('#select-pref option:selected').val();
+      var select_cityid = $('#select-city option:selected').val();
       $.getJSON('/head/grade/json/lesson2.json', function (data) {
           let pref = data.find((p) => p.prefid === select_prefid);
-        //「find()」は、対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッド
+          let city = pref.city.find((c) => c.cityid === select_cityid);
-        //=>アロー関数
-        //★for文
-          for ( let city of pref.city ){
+          for ( let town of city.town ){
-              let buf = '<option value="' + city.cityid + '">' + city.cityname + '</option>';
+              let buf = '<option value="' + town.townid + '">' + town.townname + '</option>';
-            //cityとう中からcityidを参照している
-              $('#select-city').append(buf);
+              $('#select-town').append(buf);
               console.log(buf);
@@ -230,38 +246,6 @@
   });
-  // 3つ目の選択
-  $('#select-city').on('change', function () {
-      $('#select-town option:nth-child(n+2)').remove(); // select-townの2つ目のoptionをクリア
-      var select_prefid = $('#select-pref option:selected').val();
-      var select_cityid = $('#select-city option:selected').val();
-      $.getJSON('/head/grade/json/lesson2.json', function (data) {
-          let pref = data.find((p) => p.prefid === select_prefid);
-          let city = pref.city.find((c) => c.cityid === select_cityid);
-          for ( let town of city.town ){
-              let buf = '<option value="' + town.townid + '">' + town.townname + '</option>';
-              $('#select-town').append(buf);
-              console.log(buf);
-          }
-      });
-  });
 </script>
 ```
@@ -270,14 +254,12 @@
 ### 試したこと
+    $('.js_search').on('click',function(){
+    });
-ここに問題に対して試したことを記載してください。
+発火させるキーはこれだと思います。
-### 補足情報（FW/ツールのバージョンなど）
-ここにより詳細な情報を記載してください。
+根本的な書き方がわからず、申し訳ございません。