Is it possible to dynamically reload a form:select

Question

I've a pair of state/city drop down selects in a form. The city drop down should be dynamically changed depending of the state selected by the user. I'm using jQuery with Spring MVC.

My object of states/cities is a HashMap of HashMaps, so, for state '01' (first key), I've got cities 001 (second key) - city1 (value) and 002 (second key) - city2 (value):

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

where cities is a list which I retrieve from database.

I'm passing this object to my view with:

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

Where districts is the lists of the different states.

Now, my JSP shows the values with 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>

I'm hardcodding countiesByDistrict['13'] to show the cities of district 13, and it does it ok, but now, obviously, I want it to change depending of the code selected at addressdistrict form:select.

Anyone can help?

Answer 1

Make an ajax call to get the list of cities and update your other select box. If you don't want to do ajax call or the list of cities is small fetch both details in initial page request and use javascript/jquery to update. Check this question jquery-json-to-populate-dropdown-list,

Answer 2

I think i faced a pretty much similar issue, i had a structure like follows:

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

and i needed to dinamically update the option values available in the selects with ids *add_rule_form_rules[i].attribute*

so i used the following jquery code:

 //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());
 });

Of course you still need the server side component to return a JSON (or xml if you prefer) response containing the value available for a specific ambit selected