如何使用JavaScript在JSP页面上的下拉列表中为选定值呈现属性？

I'm working on a java web application, I m using spring mvc and jsp pages.

我正在研究一个java Web应用程序,我正在使用spring mvc和jsp页面。

What I am doing: On a jsp page, I m receiving from a controller an arraylist with wave objects, which are defined as a java class (model) and contain the attributes: name, start date, end date.

我在做什么:在jsp页面上,我从控制器接收带有wave对象的arraylist,它被定义为java类(模型)并包含属性:name,start date,end date。

I am populating a dropdown element from the arraylist with the attribute. name for the wave objects.

我正在使用属性填充arraylist中的下拉元素。波对象的名称。

<c:forEach var="wave" items="${waveList}" varStatus="iter">         
<option value="${wave.name}">${wave.name}</option>
</c:forEach>

The problem: How can I use the other attributes (startdate, enddate), for the wave which is selected from the dropdown and show them on the jsp page, under the dropdown, without refreshing the page.

问题:我如何使用其他属性(startdate,enddate),从下拉列表中选择的wave并在下拉列表的jsp页面上显示它们,而不刷新页面。

I know I have to use javascript, but i don't know javascript, I'm guessing it's not a complicated thing to achieve this. If you guys could give me the answer or direct me to a tutorial or something... I would appreciate it!

我知道我必须使用javascript,但我不知道javascript,我猜它实现这一点并不复杂。如果你们可以给我答案或指导我一个教程或其他东西......我将不胜感激!

2 个解决方案

#1

you need to use AJAX to query the server to get the extra information from the server.

您需要使用AJAX查询服务器以从服务器获取额外信息。

I think w3c issued a great tutorial for AJAX, you don't need to know a lot about JS

我认为w3c为AJAX发布了一个很棒的教程,你不需要了解很多关于JS的知识

http://www.w3schools.com/ajax/ajax_intro.asp

After you understood the basic principle of JS and AJAX, you need a framework to do good and easy JS. I advice jQuery: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

在了解了JS和AJAX的基本原理之后,您需要一个框架来完成简单的JS。我建议jQuery:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

#2

If you could make slight design change you could avoid the additional HTTP (AJAX) request.

如果您可以进行轻微的设计更改,则可以避免额外的HTTP(AJAX)请求。

<option value="${wave.name}">${wave.name}</option>

Instead of "name" in value attribute, you could store your end date and start date as a string with a delimiter (enddate::startdate) and in JS you could define an onclick/onSelect/onChange listener for the select retrieve the selected value.

您可以将结束日期和开始日期存储为带有分隔符的字符串(enddate :: startdate)而不是JS中的“name”,而在JS中,您可以为select定义onclick / onSelect / onChange侦听器,以检索所选值。

For Javascript snippet for Select (HTML): Get selected value in dropdown list using JavaScript?

对于Select(HTML)的Javascript代码段:使用JavaScript在下拉列表中获取选定的值?

#1