java - 在 JavaScript 下拉列表中显示对象的值

Question

我有一个 javascript 下拉列表，它是根据对象的“名称”字段填充的。是否可以将整个对象放入下拉列表中并仅显示名称？我问的原因是因为我想根据用户选择的内容更改另一个下拉列表的值，并且该信息已在第一个对象中可用(在我仅删除名称之前)。

所以现在我有这个(Java Controller ):

 List<String> hostsList = new ArrayList<String>();

 for (Client client : adminService.getClients()){
     hostsList.add(client.getName());
 }

 result.put("hostsList", hostsList);

然后在 javascript 端:

<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>

那么如何将整个对象放入下拉列表中并只显示其名称？

谢谢

Answer 1

据我所知，您要求将 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>

希望这可以帮助您入门!