質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Q&A

1回答

1518閲覧

ラジオボタン選択により、セレクトボックスの中身を変化させたい。

mamotail

総合スコア5

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

0グッド

1クリップ

投稿2021/06/27 01:41

編集2021/06/27 02:01

Springを使用し、controllerから3つのリストを受け取り、そのリストをラジオボタンの選択に応じて、セレクトボックスの中身に入れたい。
javascriptでラジオボタンクリックのイベントで、入れ替えを実施したいが、どう実装すればよいのかわからないので、教えていただきたいです。

Controller

java

1@Controller 2public class CourseSearchController { 3 /** 4 * 初期表示画面に遷移する 5 * @return 検索画面へのパス 6 */ 7 @RequestMapping("/") 8 public String top(Model model){ 9 10 List <Grade> elementary = new ArrayList<Grade>(); 11 List <Grade> junior = new ArrayList<Grade>(); 12 List <Grade> high = new ArrayList<Grade>(); 13 14 setElementalyList(elementary); 15 setJuniorList(junior); 16 setHighList(high); 17 18 model.addAttribute("elementary", elementary); 19 model.addAttribute("junior", junior); 20 model.addAttribute("high", high); 21 22 return "top"; 23 } 24 25 public List<grade> setElementalyList(List <grade> elementaryList) { 26 elementaryList.get(0).setId_grade("11"); 27 elementaryList.get(0).setName_grade("小学校1年生"); 28 elementaryList.get(1).setId_grade("12"); 29 elementaryList.get(1).setName_grade("小学校2年生"); 30 elementaryList.get(2).setId_grade("13"); 31 elementaryList.get(2).setName_grade("小学校3年生"); 32 elementaryList.get(3).setId_grade("14"); 33 elementaryList.get(3).setName_grade("小学校4年生"); 34 elementaryList.get(4).setId_grade("15"); 35 elementaryList.get(4).setName_grade("小学校5年生"); 36 elementaryList.get(5).setId_grade("16"); 37 elementaryList.get(5).setName_grade("小学校6年生"); 38 return elementaryList; 39 } 40 41 public List<grade> setJuniorList(List <grade> juniorList) { 42 juniorList.get(0).setId_grade("21"); 43 juniorList.get(0).setName_grade("中学1年生"); 44 juniorList.get(1).setId_grade("22"); 45 juniorList.get(1).setName_grade("中学2年生"); 46 juniorList.get(2).setId_grade("23"); 47 juniorList.get(2).setName_grade("中学3年生"); 48 return juniorList; 49 } 50 51 public List<grade> setHighList(List <grade> highList) { 52 highList.get(0).setId_grade("31"); 53 highList.get(0).setName_grade("高校1年生"); 54 highList.get(1).setId_grade("32"); 55 highList.get(1).setName_grade("高校2年生"); 56 highList.get(2).setId_grade("33"); 57 highList.get(2).setName_grade("高校3年生"); 58 return highList; 59 } 60 61}

Form

java

1@Data 2public class Grade { 3 //id 4 String id_grade = null; 5 //名称 6 String name_grade = null; 7 8}

html

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta charset="UTF-8"> 5<title>test</title> 6</head> 7<body> 8 <form name="TOUROKU" method="post" action="/search"> 9 10  対象学年 : 11  <input type="radio" id="radio0" name="school" value="1" onclick="School()">小学校 12  <input type="radio" id="radio1" name="school" value="2" onclick="School()">中学校 13  <input type="radio" id="radio2" name="school" value="3" onclick="School()">高校 14  <br> 15 16  対象学年 : 17  <select id="TARGET" name="TARGET"> 18   <option value="">指定なし</option> 19   //ここに受け取ったリストをonclickで入れたい 20  </select> <br> 21 </form> 22</body> 23<script type="text/javascript"> 24function School() { 25 var radio0 = document.forms.TOUROKU.radio0.checked; 26 var radio1 = document.forms.TOUROKU.radio1.checked; 27 var radio2 = document.forms.TOUROKU.radio2.checked; 28 29 if(radio0 == true) { 30 //受け取ったリストelementaryをTARGETの<option>に入れたい。 31 } else if(radio1 == true){ 32 //受け取ったリストjuniorをTARGETの<option>に入れたい。 33 } else if(radio2 == true) 34 //受け取ったリストhighをTARGETの<option>に入れたい。 35 } 36} 37</script> 38</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

「リスト」がサーバサイドで生成されるデータなら、
ラジオボタン選択時にAjaxなど非同期通信でサーバサイドから得ることになります。
Ajax と REST API で調べて対応してみてください。

投稿2021/06/27 04:32

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問