javaとHTML(jsp)を使っての表示

2020年4月22日2021年1月24日

データ取得の方法にMapを使っているが、DBから取得した場合も使えます。
HTMLに直接javaを埋め込んでいるのでjspファイルを使用してください。

セレクトボックスで選択した人とそれに紐づいたメールアドレスの取得を行います。

①セレクトボックス選択前

②セレクトボックス選択中

③セレクトボックス選択後

データの定義

<%@page import="java.util.HashMap"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Map<String, String> map = new HashMap<>();
	map.put("おれ", "おれのメールアドレス");
	map.put("同僚", "同僚のメールアドレス");
	map.put("上司", "上司のメールアドレス");
	map.put("後輩", "後輩のメールアドレス");
	map.put("先輩", "先輩のメールアドレス");
	map.put("松本", "松本のメールアドレス");
	map.put("代表取締役", "代表取締役のメールアドレス");
%>

まず、人の名前とデータをMapにして格納します。
jspは<%%>でHTMLにjavaを埋め込むことができます。

表示側

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
		<script type="text/javascript">
			function setMail() {
				var value = document.getElementById("selectUser").value;
				var getMail = document.getElementById("getMail");
				var text = value;
				getMail.value = text;
			}
		</script>
	</head>
	<body>
		<select id="selectUser" onchange="setMail()">
		<option value=""></option>
		<%for(Map.Entry<String, String> entry : map.entrySet()) { %>
			<option value="<%=entry.getValue() %>" ><%=entry.getKey() %></option>
		<%} %>
	</select>
	<input type="text" id="getMail">
	
	</body>
</html>

真ん中あたりの<%%>で埋め込まれているのが肝です。

選択された人が「キー」となってメールアドレスを呼びます。
呼ばれたメールアドレスは、<script></script>の間で、処理されテキストボックスへ表示されます。

全体のコード

<%@page import="java.util.HashMap"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Map<String, String> map = new HashMap<>();
	map.put("おれ", "おれのメールアドレス");
	map.put("同僚", "同僚のメールアドレス");
	map.put("上司", "上司のメールアドレス");
	map.put("後輩", "後輩のメールアドレス");
	map.put("先輩", "先輩のメールアドレス");
	map.put("松本", "松本のメールアドレス");
	map.put("代表取締役", "代表取締役のメールアドレス");
%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
		<script type="text/javascript">
			function setMail() {
				var value = document.getElementById("selectUser").value;
				var getMail = document.getElementById("getMail");
				var text = value;
				getMail.value = text;
			}
		</script>
	</head>
	<body>
		<select id="selectUser" onchange="setMail()">
		<option value=""></option>
		<%for(Map.Entry<String, String> entry : map.entrySet()) { %>
			<option value="<%=entry.getValue() %>" ><%=entry.getKey() %></option>
		<%} %>
	</select>
	<input type="text" id="getMail">
	
	</body>
</html>

念のため全体コードも載せておきます。
参考になれば嬉しいです。