JavaScriptを使用し、分類1で選択した項目により、選択2の選択肢の表示内容が変わるようコードを書きたい

前提・実現したいこと

createInput.jspの分類1にて、プルダウンの項目選択を行い、”選択してください”または、”全般”を選択したときは、分類2のプルダウンがグレーアウトになり、
分類1で”開発用語”が選択された場合は、分類2で”設計”、”実装”、”試験”が選択できるようになり、
分類1で”運用用語”が選択された場合は、分類2で”運用”、”保守”が選択できるようにcategory.jsを書きたいと思っています。

発生している問題・エラーメッセージ

jspファイルにてdisableを使用し、分類1で対象の選択項目を選択しても分類2がグレーアウトされず、分類2の表示がカラで表示されるだけでした

また、category.jsから
function setNothing() {
category2.textContent = "";
}
と
function setAllcategory() {
category2.textContent = "";
}
を削除してしまうと、
最初の1回目は、分類1で”選択してください”または、”全般”を選択したときは、分類2のプルダウンがグレーアウトになりますが、
分類1で”開発用語”や”運用用語”を一度クリックした後に、
”選択してしてください▼”または”全般”をクリックすると、分類2がグレーアウトせず、「分類1で”開発用語”や”運用用語”を選択したときに出するはずのプルダウンの選択肢」が出るようになってしまいます。
期待する動きになるように修正するにはどのようにしたら良いでしょうか？
お知恵を貸していただけるとありがたいです。よろしくお願いします。

該当のソースコード

createInput.jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<%@ page import="java.util.*" %>
4
5<!DOCTYPE html>
6<html>
7<head>
8<meta charset="UTF-8">
9<title>登録入力画面</title>
10<link rel="stylesheet" href="css/glossary.css">
11<script src="js/category.js"></script>
12<script src="js/validation_input.js"></script>
13</head>
14<body>
15<div id="container">
16
17	<!-- ヘッダーの読み込み -->
18	<jsp:include page="common/header.jsp" flush="true"/>
19
20	<main>
21		<h2>新規登録</h2>
22		<hr/>
23		<form method="get" action="./CreateConfirmServlet">
24			<div class = "create">
25				<label id="h" for="name">見出し</label>
26				<input type="text" name="name" maxlength="50" required/><br><br>
27			</div>
28			<div class = "create">
29				<label id="h" for="read">読み方</label>
30				<input type="text" name="read" maxlength="50"/><br><br>
31			</div>
32			<div class = "create">
33				<label id="h" for="category1">分類1</label>
34				<select name="category1" id="category1" required>
35				<option value="">選択してください▼</option>
36				<option value="全般">全般</option>
37				<option value="開発用語">開発用語</option>
38				<option value="運用用語">運用用語</option>
39				</select><br><br>
40			</div>
41			<div class = "create">
42				<label id="h" for="category2">分類2</label>
43				<select name="category2" id="category2">
44					<option value="" disabled></option>
45				</select><br><br>
46			</div>
47			<div class="create">
48				<label id="h" for="explain">説明</label>
49				<textarea id="explain" name="explain" cols="49" rows="20" placeholder="入力してください。" required></textarea><br><br>
50			</div>
51			<div class="submit">
52				<input type="submit" class="button1" value="登録"><br><br>
53			</div>
54		</form>
55		<br/>
56	</main>
57
58	<!-- フッターの読み込み -->
59	<jsp:include page="common/footer.jsp" flush="true"/>
60
61</div>
62</body>
63</html>

category.js
1/**
2 * select categorys
3 */
4window.onload = function() {
5	// the option of the category2
6	category2 = document.getElementById("category2");
7	// ジャンルの選択肢が変更された際の動作
8	category1 = document.getElementById("category1");
9	category1.onchange = changeCategory;
10}
11
12// ジャンルの選択肢が変更された際の動作
13function changeCategory() {
14	// 変更後のカテゴリを取得
15	var changedCategory = category1.value;
16	if (changedCategory == "全般") {
17		setAllcategory();
18	} else if (changedCategory == "") {
19		setNothing();
20	} else if (changedCategory == "開発用語") {
21		setDevelopment();
22	} else if (changedCategory == "運用用語") {
23		setOperationTerm();
24	}
25}
26
27document
28		.getElementById("category1")
29		.addEventListener(
30				"change",
31				function() {
32					var cate1_elem = document.getElementById("category1");
33					var s_value = cate1_elem.options[cate1_elem.selectedIndex].value.console
34							.log(s_value);
35					var cate2_elem = document.getElementById("category2");
36					if (s_value.equals("") ||
37							s_value.equals("全般")){
38						cate2_elem.disabled = true;
39					} else {
40						cate2_elem.disabled = false;
41					}
42				}, false);
43
44// set to the ""
45function setNothing() {
46	category2.textContent = "";
47}
48
49// set to the "all categories"
50function setAllcategory() {
51	category2.textContent = "";
52}
53
54// set to the "development terms"
55function setDevelopment() {
56	// set the option of the "category2" to null
57	category2.textContent = null;
58	var developmentTerm = [ {
59		cd : 0,
60		label : "選択して下さい▼"
61	}, {
62		cd : 1,
63		label : "設計"
64	}, {
65		cd : 2,
66		label : "実装"
67	}, {
68		cd : 3,
69		label : "試験"
70	} ];
71	developmentTerm.forEach(function(value) {
72		var op = document.createElement("option");
73		op.value = value.label;
74		op.text = value.label;
75		category2.appendChild(op);
76	});
77}
78
79// set to the "operation terms"
80function setOperationTerm() {
81	// set the option of the "category2" to null
82	category2.textContent = null;
83	// options
84	var operatingTerm = [ {
85		cd : 0,
86		label : "選択して下さい▼"
87	}, {
88		cd : 4,
89		label : "運用"
90	}, {
919	cd : 5,
92		label : "保守"
93	} ];
94	operatingTerm.forEach(function(value) {
95		var op = document.createElement("option");
96		op.value = value.label;
97		op.text = value.label;
98		op.id = value.cd;
99		category2.appendChild(op);
100	});
101}
102

補足情報（FW/ツールのバージョンなど）

eclipse　version　4.16.0.v20200604-0951
java version "14.0.1"
tomcat9

行動規範の内容に同意します

回答1件

ベストアンサー

ご質問のJavaScriptコード内（setOperationTerm()）には転記ミス（エラー）があります。

Diff
1-9    cd : 5,
2+     cd : 5,

分類2がグレーアウト

disabled 属性を option 要素に記述しているのを、select 要素に移動してください。

Diff
1-               <select name="category2" id="category2">
2-                   <option value="" disabled></option>
3+               <select name="category2" id="category2" disabled>
4+                   <option value=""></option>
5                </select><br><br>

JavaScript で select#category2 の子要素（<option>）を動的変更する場合、disabled 属性を一旦 false にする必要があります。

javascript
1  var CATE2_LIST = [
2    { id : 0, type: "all", label : "選択して下さい▼", value : ""},
3    { id : 1, type: "dev", label : "設計", value : "設計" },
4    { id : 2, type: "dev", label : "実装", value : "実装"},
5    { id : 3, type: "dev", label : "試験", value : "試験"},
6    { id : 4, type: "op", label : "運用", value : "運用"},
7    { id : 5, type: "op", label : "保守", value : "保守"}
8  ];
9
10  window.addEventListener("load", function() {
11    var
12      updateCategory2 = function ( options ) {
13        var select = document.getElementById("category2");
14        var enabled = !!options;
15
16        select.disabled = false; // 子要素変更のため
17        select.innerHTML = ""; // 一旦空にする。
18
19        (options || CATE2_LIST.slice(0,1)).forEach(function( item ) {
20          var opt = document.createElement("option");
21          if( item.id ) opt.id = item.id;
22          opt.value = item.value;
23          opt.textContent = item.label || item.value;
24          
25          select.appendChild( opt );
26        });
27        select.disabled = !enabled; // 結果に応じて変更
28      },
29
30      changeCategory = function ( evt ) {
31        var list; // undefined
32        switch( evt.target.value ) {
33        case "全般":
34          list = CATE2_LIST;
35          break;
36        case "開発用語":
37          list = CATE2_LIST.filter( i=>i.type=="dev"||i.type=="all" );
38          break;
39        case "運用用語":
40          list = CATE2_LIST.filter( i=>i.type=="op"||i.type=="all" );
41          break;
42        }
43        updateCategory2( list );
44      }
45    ;
46
47    document.getElementById("category1")
48      .addEventListener("change", changeCategory);
49  }, !1);