Question

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

状态/城市的对象是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);

其中cities是我从数据库中检索的列表。

我将此对象传递给我的视图：

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

区域是不同州的名单。

现在，我的JSP使用form显示值：choose：

        <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>

我正在努力编写县的区域[ '13']来显示13区的城市，它确实没问题，但现在，显然，我希望它根据所选代码的不同而改变addressdistrict form：选择。

任何人都可以提供帮助吗？

Answer 1

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

Answer 2

我认为我遇到了一个非常相似的问题，我的结构如下：

<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 *

以dinamically方式更新选项中可用的选项值

所以我使用了以下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）响应，其中包含可用于特定范围的值

是否可以动态重新加载表单：根据另一个表单的值选择值：select

2 个答案: