从对象的javascript下拉列表中显示一个值

Question

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

因此，在这一刻，我有这个（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> 

那么，如何把整个对象到下拉列表，并只是显示它的名字？

感谢，

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> 

希望能帮助你开始！