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 で設定する方法です。これは、 GsonやJacksonなどの JSON ライブラリを使用するのが最も簡単かもしれません。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>

Client2 番目の方法は、現在行っていることを正確に行い、他のドロップダウンに入力するために必要な最小限のオブジェクトだけを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 に答える