标签：spring-boot thymeleaf html java
我有3个下拉菜单(其中一个填充城市,一个包含代理商,一个包含服务).如果我选择一个城市,则第二个下拉列表应加载数据(代理商),如果我选择一个城市,则3个下拉列表应加载数据(服务).我能够填充第一个下拉列表(城市),但是我不知道如何填充第二个和第三个下拉列表.
我应该为每个下拉菜单编写一个控制器并返回值吗？如果答案是肯定的,我该如何返回该值？
我读过Thymeleaf不是组件技术,而是像JSP这样的模板技术.因此,Thymeleaf中没有组件或内置机制可以进行客户端-服务器通信.
因此,我需要使用简单的旧HTML表单或AJAX调用对通信进行编程.
如何使用普通的旧HTML进行编程？
我尝试使用表单,但是我只单击一次提交,这不是我所需要的.
我阅读了有关下拉菜单的帖子,但找不到任何有用的信息.我看到简单的方法是使用jQuery,但我不知道jQuery.
有什么办法可以只使用百里香和弹簧靴吗？
谢谢！
我将在下面发布我的代码.
约会.html
<form th:action="@{/appointment/create}" method="post" id="appointmentForm">
<input type="hidden" name="id" th:value="${appointment.id}"/>
<div class="form-group">
<label for="location">Alege orasul:</label>
<select class="form-control" required="required"
th:value="${appointment.location}" name="location" id="location">
<option disabled="disabled" selected="selected" > --
alege orasul --</option>
<option th:each="city : ${cities}" th:value="${city.id}"
th:text="${city.name}" ></option>
</select>
</div>
</form>
<form th:action="@{/appointment/agency}" method="post" id="appointmentForm">
<input type="hidden" name="id" th:value="${appointment.id}"/>
<div class="form-group">
<label for="location">Alege agentia:</label>
<select class="form-control" th:value="${appointment.agency}" name="agency" id="agency" required="required">
<option disabled="disabled" selected="selected" > -- alege agentia --</option>
<option th:each="agency : ${agencies}" th:value="${agency.id}" th:text="${agency.name}" ></option>
</select>
</div>
</form>
<form th:action="@{/appointment/service}" method="post" id="appointmentForm">
<input type="hidden" name="id" th:value="${appointment.id}"/>
<div class="form-group">
<label for="location">Alege serviciul:</label>
<select class="form-control" th:value="${appointment.service}" name="service" id="service" required="required">
<option disabled="disabled" selected="selected" > -- alege serviciul --</option>
<option th:each="service : ${services}" th:value="${service.id}" th:text="${service.name}" ></option>
</select>
</div>
</form>
AppController.java
@Controller
@RequestMapping("/appointment")
public class AppointmentController {
@Autowired
UserService userService;
AppointmentService appointmentService;
CityService cityService;
AgencyService agencyService;
SerService serService;
private ModelAndView mav;
@RequestMapping(value="/create", method=RequestMethod.GET)
public String createAppointmentPost(Model model, @ModelAttribute("city") City
city, @ModelAttribute("agency") Agency agency){
Appointment appointment=new Appointment();
model.addAttribute("appointment", appointment);
model.addAttribute("dateString", "");
model.addAttribute("cities", cityService.findAll());
//getAllAgencies(model, city);
getAllServices(model,agency);
return "appointment";
}
@RequestMapping(value="/agency", method=RequestMethod.GET)
public String getAllAgencies(Model model, @ModelAttribute("city") City city){
model.addAttribute("agencies", agencyService.listAllAgencies(city));
return "redirect:/appointment/create";
}
public void getAllServices(Model model, @ModelAttribute("agency") Agency
agency){
if(agency==null){
return;
}
model.addAttribute("services", serService.listAllServices(agency));
}
解决方法:
因此,我能够使用jQuery解决此问题.
这是一个有用的链接：http://www.rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/
我将在下面发布我的代码,也许会帮助某人
-mycontroller
@RequestMapping(value="/create", method=RequestMethod.GET)
public String createAppointmentPost(Model model, @ModelAttribute("city") City
city,
@ModelAttribute("agency") Agency agency){
Appointment appointment=new Appointment();
model.addAttribute("appointment", appointment);
model.addAttribute("dateString", "");
model.addAttribute("cities", cityService.findAll());
return "appointment";
}
@RequestMapping(value = "/agencies", method = RequestMethod.GET)
public @ResponseBody
List<Agency> findAllAgencies(
@RequestParam(value = "cityId", required = true) Long cityId) {
City city = cityService.findCity(cityId);
return agencyService.listAllAgencies(city);
}
-百里香叶
<div class="form-group">
<label for="location">Alege orasul:</label>
<select class="form-control" required="required"
th:value="${appointment.location}" name="location" id="location">
<option disabled="disabled" selected="selected" > --
alege orasul --
</option>
<option th:each="city : ${cities}" th:value="${city.id}"
th:text="${city.name}" >
</option>
</select>
</div>
<div class="form-group">
<label for="location">Alege agentia:</label>
<select class="form-control" th:value="${appointment.agency}"
name="agency" id="agency" required="required">
<option disabled="disabled" selected="selected" > --alege
agentia --</option>
</select>
</div>
jQuery-一个下拉菜单
$('#location').change(
function() {
$.getJSON("http://localhost:8181/appointment/agencies", {
cityId : $(this).val(),
ajax : 'true'
}, function(data) {
var html = '<option value="">--alege agentia--</option>';
var len = data.length;
for ( var i = 0; i < len; i++) {
html += '<option value="' + data[i].nume + '">'
+ data[i].nume + '</option>';
}
html += '</option>';
$('#agency').html(html);
});
});
标签：spring-boot,thymeleaf,html,java 来源： https://codeday.me/bug/20191111/2019566.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。