我有一个 JSP,其中有一个select
包含实体种类名称的列表。当我选择一个实体类型时,我需要填充另一个实体类型select
包含所选实体类型的字段名称的列表。为此,我调用了一个 JavaScript 函数onchange
event.
在 JavaScript 方法中,我需要调用后端的方法,该方法返回arraylist
包含所选实体种类的字段名称。
使用和不使用 Ajax 时如何调用该方法?另外,如何使用动态填充第二个选择列表arrayList
?
我将描述两种方法:使用/不使用 AJAX。
-
如果你想做一个同步表单提交你需要附上onchange
第一次活动select
元素:
<select name="select-one" id="select-one" onchange="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
完成此操作后,将提交表单,并且第一个选择选项将可用request.getParameter("select-one")
,您将根据该数据为第二个下拉列表提供数据,通常转发到 JSP。
-
如果您想检索列表via AJAX并重新填充另一个下拉列表,您可以发送 AJAX 请求并在回调函数中处理返回的数据:
var val = $('#select-one option:selected').val();
$.ajax({
url: "servletURL",//servlet URL that gets first option as parameter and returns JSON of to-be-populated options
type: "POST",//request type, can be GET
cache: false,//do not cache returned data
data: {one : val},//data to be sent to the server
dataType: "json"//type of data returned
}).done(function(data) {
var second = $("#select-two");
$.each(data, function() {
options.append($("<option />").val(this.value).text(this.label));
});
});
这样做后,第二个下拉列表将在不刷新页面的情况下重新填充。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)