从对象的javascript下拉列表中显示一个值
问题描述:
我有一个基于对象的'名称'字段填充的javascript下拉列表。是否可以将整个对象放在下拉列表中,并只显示名称? im问的原因是因为我想根据用户选择的内容更改另一个下拉列表的值,并且该信息在第一个对象中已经可用(在我删除名称之前)。从对象的javascript下拉列表中显示一个值
因此,在这一刻,我有这个(Java的控制器):在JavaScript端
List<String> hostsList = new ArrayList<String>();
for (Client client : adminService.getClients()){
hostsList.add(client.getName());
}
result.put("hostsList", hostsList);
,然后这样的:
<form:form id="iForm" method="post"
action="${pageContext.request.contextPath}/host"
commandName="hostsForm">
<td valign="top">Hosts:</td>
<td valign="top"><form:select path="uSetHostName">
<form:option value="NONE" label="--- Select ---" />
<form:options items="${hostsList}" />
</form:select>
</td>
那么,如何把整个对象到下拉列表,并只是显示它的名字?
感谢,
答
你问了一个Java对象转换成JavaScript对象,据我所知,这样您就可以在以后使用该对象在JavaScript带动下拉值。
有几种方法可以做到这一点。第一种方法是将每个Java Client
对象表示为JavaScript对象,然后在JavaScript中填充这两个下拉列表。这可能是最简单的使用某种类型的JSON库,如Gson或Jackson。下面是使用jQuery和GSON一个例子:
<script lang="text/javascript">
var clients = <%= new Gson().toJson(clients) %>;
// Fill the first dropdown.
$("#myDropdown").empty();
$.each(clients, function() {
$("<option/>").attr("value", this.id).text(this.name).appendTo("#myDropdown");
});
$("#myDropdown").on("change", function(event) {
var selectedClientId = $("#myDropdown").val();
var client = $.grep(clients, function(client) {
return client.id = selectedClientId;
});
$("#myOtherDropdown").val(client.someOtherValue);
});
</script>
...
<select id="myDropdown" name="..."></select>
...
<select id="myOtherDropdown" name="..."></select>
第二种方法是做的正是你现在在做什么,然后放了你所需要填充其他下拉到Client
对象的最小量JavaScript代码。这看起来像这样:
<script lang="text/javascript">
var clientIdToOtherValueMap = {
<%
for (Client client : clients) {
%>
'<%= client.id %>': '<%= client.otherDropdownId %>',
<%
}
%>
'': ''
};
// Fill the first dropdown.
$("#myDropdown").on("change", function(event) {
$("myOtherDropdown").val(clientIdToOtherValueMap[$("#myDropdown").val()]);
});
</script>
...
<select id="myDropdown" name="..."></select>
...
<select id="myOtherDropdown" name="..."></select>
希望能帮助你开始!
感谢您的回复。我正在努力寻找一种将客户端对象转换为Javascript的方式。这是直截了当的? – maloney 2013-02-21 13:42:42
正如我所提到的,一种方法是通过Gson或Jackson将其转换为JSON。因此,上面的答案中的'。你需要确保你的'Client'对象没有指向一堆你不想序列化的东西 - 或者至少,如果是的话,你注释了额外的属性以防止它们被存在转换为JSON。 – 2013-02-21 13:47:29