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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。