是否有可能動態地重新加載表單：選擇值取決於另一個表單的值：select

Question

我在表單中有一對州/城市下拉選擇。城市下拉應根據用戶選擇的狀態動態更改。我在Spring MVC中使用jQuery。

我的州/城市的對象是HashMap的HashMap，所以對於狀態'01'（第一個鍵），我得到了城市001（第二個鍵） - city1（值）和002（第二個鍵） - 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); 

其中cities是我從數據庫中檢索的列表。

我通過這個對象我的看法有：

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

其中區是不同的國家名單。

現在，我的JSP顯示了表單中的值：選擇：

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

我hardcodding countiesByDistrict ['13']顯示區13的城市，它確實是好的，但現在，顯然，我希望它根據在地址區域窗體中選擇的代碼進行更改：select。

任何人都可以幫忙嗎？

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> 

，我需要dinamically更新可用的選項值與選擇的id * add_rule_form_rules [I] *屬性約

所以我用下面的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()); 
}); 

當然，你仍然需要在服務器端組件（如果你喜歡或XML）返回一個JSON包含可供選擇的特定範圍