プログラム言語:javascript_jquery:ループ

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

--- プログラム言語:javascript_jquery:ループ [2018/10/11 11:01]
yusuke_komori 作成
+++ プログラム言語:javascript_jquery:ループ [2019/04/04 17:29] (現在)
yusuke_komori
@@ 行 1: / 行 1: @@
 ====== ループ ======
-===== jQueryでのループ =====
+===== eachを使ったjQueryでのループ =====
+==== HTML要素でループ ====
 <code>
 <form action="next.html" method="post" enctype="multipart/form-data">
@@ 行 18: / 行 19: @@
   $('.test').each(function(i){
     console.log($(this).data('num'));
+  });
+});
+</script>
+</code>
+==== オブジェクトでループ ====
+<code>
+<div>
+    学年
+    <select name="grade">
+        <option value="1">1
+        <option value="2">2
+        <option value="3">3
+    </select>
+</div>
+<div>
+    クラス
+    <select name="class">
+        <option value="">学年を選択してください
+    </select>
+</div>
+<script>
+$(function(){
+  const class_list = {
+:['1-A', '1-B', '1-C', '1-D', '1-E'],
+:['2-A', '2-B', '2-C', '2-D', '2-E'],
+:['3-A', '3-B', '3-C', '3-D', '3-E'],
+  };
+  $('select[name="grade"]').on('change', function(){
+    let grade = $(this).val();
+    $('select[name="class"] > option').remove();
+    $.each(class_list[grade], function(key, val){
+      $('select[name="class"]').append($('<option>').html(val).val(key));
+    });
   });
 });

プログラム言語/javascript_jquery/ループ.1539223299.txt.gz · 最終更新: 2018/10/11 11:01 by yusuke_komori