1

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

所以目前我有这个（Java控制器）：

 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>

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

谢谢，

4

1 回答 1

1

据我所知，您要求将 Java 对象转换为 JavaScript 对象，以便稍后在 JavaScript 中使用该对象来驱动下拉值。

有几种方法可以做到这一点。第一种方法是将每个 JavaClient对象表示为一个 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>

希望这可以帮助您入门！

于 2013-02-21T12:56:00.450 回答