回答編集履歴

セレクトボックスのJavaScriptによる動的変更を追加。HTMLの出力結果を削除。

2016/07/20 07:47

投稿

A-pZ

スコア12011

test CHANGED Viewed

@@ -148,7 +148,75 @@
   </s:iterator>
+};
+var changeYear = function() {
+  // yearsセレクトボックスで選んだ値を取得
+  var selectedValue = document.getElementById("years").value;
+  // 月別セレクトボックスに表示する月一覧を抽出
+  var months = yearMonth[selectedValue];
+  // 月のセレクトボックスを洗い替え
+  replaceMonths(months);
+};
+var replaceMonths = function(months) {
+  // optionを全削除
+  var monthsNode = document.getElementById("months")
+  if ( monthsNode !== null ) {
+    for ( i=monthsNode.childNodes.length;i>0;i--) {
+      monthsNode.removeChild(monthsNode.childNodes[i-1]);
-}
+    }
+  }
+  // option要素を再作成
+  for ( i=0;i<months.length;i++ ) {
+    var optionNode = document.createElement('option');
+    optionNode.setAttribute('value',months[i]);
+    var text = document.createTextNode(months[i]);
+    optionNode.appendChild(text);
+    monthsNode.appendChild(optionNode);
+  }
+};
+window.onload = function() {
+  changeYear();
+};
 </script>
@@ -177,207 +245,3 @@
 ```
-出力されるHTML
-```html
-<!DOCTYPE>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Insert title here</title>
-<script>
-var yearMonth = {
-    '2017': [
-        '4' ,
-        '5' ,
-        '6' ,
-        '7' ,
-        '8' ,
-        '9' ,
-        '10' ,
-    ] ,
-    '2016': [
-        '1' ,
-        '2' ,
-        '3' ,
-        '4' ,
-    ] ,
-    '2015': [
-        '9' ,
-        '10' ,
-        '11' ,
-        '12' ,
-    ] ,
-}
-</script>
-</head>
-<body>
-    '2017': [
-        '4' ,
-        '5' ,
-        '6' ,
-        '7' ,
-        '8' ,
-        '9' ,
-        '10' ,
-    ] ,
-    '2016': [
-        '1' ,
-        '2' ,
-        '3' ,
-        '4' ,
-    ] ,
-    '2015': [
-        '9' ,
-        '10' ,
-        '11' ,
-        '12' ,
-    ] ,
-</body>
-</html>
-```