1

我在表格中有一对州/城市下拉选择。城市下拉菜单应根据用户选择的状态动态更改。我将 jQuery 与 Spring MVC 一起使用。

我的州/城市对象是 HashMaps 的 HashMap，因此，对于州“01”（第一个键），我有城市 001（第二个键）-city1（值）和 002（第二个键）-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

进行 ajax 调用以获取城市列表并更新您的其他选择框。如果您不想进行 ajax 调用或城市列表很小，请在初始页面请求中获取两个详细信息并使用 javascript/jquery 进行更新。检查这个问题jquery-json-to-populate-dropdown-list，

于 2013-04-30T11:11:07.913 回答
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>

我需要动态更新选择中可用的选项值，ids *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 回答