從對象的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> 

希望能幫助你開始！