プルダウンのオプションのデフォルトを値によって変えたいです。

毎度投稿失礼します。
表題の件についてです。最初のページで取得した値により、次ページのプルダウンのメニューのデフォルトを変更したいです。

＜最初のページ＞

＜次ページ＞
![

このように＜次ページ＞ではオプションの一番上の『りんご』がデフォルトになってしまいますが＜最初のページ＞『バナナ』を選択したら＜次ページ＞でもデフォルトで『バナナ』を表示したいです。

javaでもjavascriptどちらでも構わないのですがセオリーだとどちらで処理するのでしょうか？可能であれば多用される方の言語で教えていただきたいです。

コードを載せさせていただきます。
よろしくお願いいたします。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action = "RegistComp" method = "post">
<p>名前を入力してください</p>
<input type = "text" name = "name">
<p>好きな食べ物を選んでください</p>
<select name = "favorite">
<option value = "apple">りんご</option>
<option value = "banana">バナナ</option>
<option value = "orange">オレンジ</option>
</select>
<br>
<br>
<input type = "submit" value = "regist">
</form>

</body>
</html>

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String name =request.getParameter("name");
		String favorite = request.getParameter("favorite");
		request.setAttribute("name",name);
		request.setAttribute("favorite", favorite);
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/selected.jsp");
		dispatcher.forward(request, response);

	}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
入力内容
<p>この名前で登録します</p>
<input type="text" value="<c:out value="${name}"/>">
<p>選択された果物は下記のものです</p>
<select name="favorite" id = "list">
<option value = "apple">りんご</option>
<option value = "banana">バナナ</option>
<option value = "orange">オレンジ</option>
</select>

<script>

</script>
</body>
</html>

※javaではスクリプトレットとJSTLのchooseを使用してみましたがうまくできませんでした。
ご教授お願いいたします。

開発環境
OS　windows10
エディション　enterprise
言語　java8.0.1310.11
MariaDB10.1
HeidiSQL
eclipse NEON

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

回答1件

ベストアンサー

javaでもjavascriptどちらでも構わないのですがセオリーだとどちらで処理するのでしょうか？

前ページの果物の情報をJavaでrequestにセットして、次ページのJSP内のJSで、該当果物のoptionタグにselected属性を追加すればよいでしょう。

・optionタグ内でselected属性を使用することで、プルダウンの初期値を指定することができます。http://masaboo.cside.com/new_html1/ht_60.htm

・JavaScriptで、該当のoptionタグにselected属性を追加する必要があります。
https://teratail.com/questions/45286

投稿2018/04/07 08:18

yukapome789

総合スコア361

sususu

2018/04/07 11:40

おかげさまで下記のソースで出来るようになりました。ありがとうございました！！ <script> var favorite = "${favorite}"; var opt; switch(favorite){ case'apple': opt = document.querySelector('option[value="apple"]'); break; case'banana': opt = document.querySelector('option[value="banana"]'); break; case'orange': opt = document.querySelector('option[value="orange"]'); break; } opt.selected = true; /* window.alert(favorite); */ </script>

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