Question

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

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

谢谢，

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>

希望这有助于您入门！

在对象的javascript下拉列表中显示值

1 个答案: