1

フォームに州/都市のドロップダウン選択のペアがあります。都市のドロップダウンは、ユーザーが選択した州に応じて動的に変更する必要があります。Spring MVC で jQuery を使用しています。

州/都市のオブジェクトは HashMap の HashMap であるため、州 '01' (最初のキー) の場合、都市 001 (2 番目のキー) - city1 (値) および 002 (2 番目のキー) - city2 (値) を取得します。 :

LinkedHashMap<String,LinkedHashMap<String, String>> enumsCountyByDistrict = new LinkedHashMap<String,LinkedHashMap<String, String>>();
LinkedHashMap<String, String> districtCounties = new LinkedHashMap<String, String>();
for (City en : cities)
    districtCounties.put(en.getCode(), en.getDescription());

enumsCountyByDistrict.put(district, districtCounties);

ここで、都市はデータベースから取得したリストです。

このオブジェクトを次の方法でビューに渡します。

modelAndView.addObject("countiesByDistrict", enumsCountyByDistrict);
modelAndView.addObject("districts", districts);

地区は、さまざまな州のリストです。

これで、私の JSP は form:selects で値を表示します:

        <div class="span3">
            <label> <fmt:message key="create.district" /></label>
            <form:select id="addressdistrict"  path="person.addressdistrict">
                <c:forEach items="${districts}" var="item">
                    <form:option value="${item.code}" label="${item.description}" />
                </c:forEach>
            </form:select>
        </div>
        <div class="span3">
            <label> <fmt:message key="create.county" /> </label>
            <form:select path="person.addresscounty" id="addresscounty">
                <form:options items="${countiesByDistrict['13']}" />
            </form:select>
        </div>

countiesByDistrict[ '13' ] をハードコーディングして、地区 13 の都市を表示しています。これで問題ありませんが、もちろん、addressdistrict form:select で選択したコードに応じて変更したいと考えています。

誰でも助けることができますか？

4

2 に答える 2

0

私はかなり似たような問題に直面したと思います.私は次のような構造を持っていました:

<form id="add_rule_form" action="URL" method="post">
<fieldset>
  <legend>New Rule</legend>

  <table class="max_width">
    <tr>
      <td>Name</td>

      <td><input id="add_rule_form_name" name="name" type="text" value="" /></td>

      <td>Ambit</td>

      <td><select id="add_rule_form_ambit" name="ambit">
        <option value="ambit1">
          ambit1
        </option>

        <option value="ambit2">
          ambit2
        </option>

        <option value="ambit3">
          ambit3
        </option>
      </select></td>

      <td>Description</td>

      <td class="max_width"><input id="add_rule_form_description" name="description"
      class="max_width" type="text" value="" /></td>
    </tr>
  </table>

  <table class="rule_table max_width">
    <tr class="rule_row" id="add_rule_form_rule_row_0">
      <td>Attribute</td>

      <td><select id="add_rule_form_rules[0].attribute" name="rules[0].attribute">
        <option value="" selected="selected">
          ---NONE---
        </option>

        <option value="valueForAmbit1-1">
          valueForAmbit1-1
        </option>

        <option value="valueForAmbit1-2">
          valueForAmbit1-2
        </option>

        <option value="valueForAmbit1-3">
          valueForAmbit1-3
        </option>

        <option value="valueForAmbit1-4">
          valueForAmbit1-4
        </option>

        <option value="valueForAmbit1-5">
          valueForAmbit1-5
        </option>

        <option value="valueForAmbit1-6">
          valueForAmbit1-6
        </option>

        <option value="valueForAmbit1-7">
          valueForAmbit1-7
        </option>
      </select></td>

      <td>Value</td>

      <td class="max_width" id="add_rule_form_value_0"><input id=
      "add_rule_form_rules[0].value" name="rules[0].value" class="max_width" type=
      "text" value="" /></td>

      <td><input type="button" class="delete" value="0" /></td>

      <td><input type="button" class="plus" value="0" /></td>

      <td></td>
    </tr>
  </table><input id="add_rule_form_submit" type="submit" value="Add" />
</fieldset>

そして、selects で使用可能なオプション値を ID *add_rule_form_rules[i].attribute* で動的に更新する必要がありました。

だから私は次のjqueryコードを使用しました：

 //Ajax Load the list of attributes for a specific ambit

 function attributePerAmbit(form_name, ambit) {
$.ajax({
    type: "GET",
    url: "/url/tomyapp/=" + ambit,
    dataType: "json",
    async: false,
    success: function (data) {
        var html = '<option value="">---NONE---</option>';
        for (var i = 0; i < data.length; i++) {
            html += '<option value="' + data[i] + '">' + data[i] + '</option>';
        }
        $("#" + form_name + " .rule_table .rule_row select").html(html);
    }
});
};


$("#add_rule_form_ambit").change(function () {
     attributePerAmbit('add_rule_form', $(this).val());
 });

もちろん、選択した特定の範囲で使用可能な値を含む JSON (または必要に応じて xml) 応答を返すには、サーバー側コンポーネントが必要です。

于 2013-04-30T14:01:32.603 に答える