需求:


后台K-V结构如下:
public final static List<String> ASList = new ArrayList<String>() {
private static final long serialVersionUID = 1L;
{
add("ASHK");
add("ASMO");
add("ASTW");
add("ASJP");
add("ASKR");
add("ASNP");
add("ASBD");
add("ASIN");
add("ASPK");
add("ASLK");
add("ASMV");
add("ASPH");
add("ASNV");
add("ASKH");
add("ASTH");
add("ASMY");
add("ASSG");
add("ASIL");
add("ASSA");
add("ASBH");
add("ASQA");
add("ASAE");
add("ASTR");
}
};
public static final List<String> EOList = new ArrayList<String>() {
private static final long serialVersionUID = 1L;
{
add("EOFI");
add("EOSE");
add("EONO");
add("EOIS");
add("EOCK");
add("EORU");
add("EOPL");
add("EOCS");
add("EOHU");
add("EODE");
add("EOAT");
add("EOCH");
add("EOGB");
add("EONL");
add("EOBE");
add("EOFR");
add("EOGR");
add("EOIT");
add("EOES");
add("EOPT");
}
};
public static final List<String> AFList = new ArrayList<String>() {
private static final long serialVersionUID = 1L;
{
add("AFKE");
add("AFSC");
add("AFEG");
add("AFZA");
}
};
public static final List<String> OCList = new ArrayList<String>() {
private static final long serialVersionUID = 1L;
{
add("OCAU");
add("OCGU");
add("OCFJ");
add("OCNZ");
}
};
public static final List<String> AMList = new ArrayList<String>() {
private static final long serialVersionUID = 1L;
{
add("NAUS");
add("NACA");
add("SACO");
add("SAPE");
add("SABR");
add("SACL");
add("SAAR");
add("SAUY");
add("SAVE");
}
};
public static final Map<String, String> continentMap = new LinkedHashMap<String, String>() {
private static final long serialVersionUID = 1L;
{
put("AS", "亚洲");
put("EO", "欧洲");
put("AM", "美洲");
put("AF", "非洲");
put("OC", "大洋洲");
}
};
public static final Map<String, List<String>> continentCountryMap = new HashMap<String, List<String>>() {
private static final long serialVersionUID = 1L;
{
put("AS", ASList);
put("EO", EOList);
put("AF", AFList);
put("OC", OCList);
put("AM", AMList);
}
};
public static final Map<String, String> countryMap = new TreeMap<String, String>() {
private static final long serialVersionUID = 1L;
{
put("ASHK", "香港");
put("ASMO", "澳门");
put("ASTW", "台湾");
put("ASJP", "日本");
put("ASKR", "韩国");
put("ASNP", "尼泊尔");
put("ASBD", "孟加拉");
put("ASIN", "印度");
put("ASPK", "巴基斯坦");
put("ASLK", "斯里兰卡");
put("ASMV", "马尔代夫");
put("ASPH", "菲律宾");
put("ASNV", "越南");
put("ASKH", "柬埔寨");
put("ASTH", "泰国");
put("ASMY", "马来西亚");
put("ASSG", "新加坡");
put("ASIL", "以色列");
put("ASSA", "沙特阿拉伯");
put("ASBH", "巴林");
put("ASQA", "卡塔尔");
put("ASAE", "阿联酋");
put("ASTR", "土耳其");
put("EOFI", "芬兰");
put("EOSE", "瑞典");
put("EONO", "挪威");
put("EOIS", "冰岛");
put("EOCK", "丹麦");
put("EORU", "俄罗斯");
put("EOPL", "波兰");
put("EOCS", "捷克");
put("EOHU", "匈牙利");
put("EODE", "德国");
put("EOAT", "奥地利");
put("EOCH", "瑞士");
put("EOGB", "英国");
put("EONL", "荷兰");
put("EOBE", "比利时");
put("EOFR", "法国");
put("EOGR", "希腊");
put("EOIT", "意大利");
put("EOES", "西班牙");
put("EOPT", "葡萄牙");
put("AFKE", "肯尼亚");
put("AFSC", "塞舌尔");
put("AFEG", "埃及");
put("AFZA", "南非");
put("OCAU", "澳大利亚");
put("OCGU", "关岛");
put("OCFJ", "斐济");
put("OCNZ", "新西兰");
put("NAUS", "美国");
put("NACA", "加拿大");
put("SACO", "哥伦比亚");
put("SAPE", "秘鲁");
put("SABR", "巴西");
put("SACL", "智利");
put("SAAR", "阿根廷");
put("SAUY", "乌拉圭");
put("SAVE", "委内瑞拉");
}
};
后台传参如下:
model.addAttribute("continentMap", GlobalShoppingConstants.continentMap);
model.addAttribute("continentCountryMap", JSON.toJSONString(GlobalShoppingConstants.continentCountryMap));
model.addAttribute("countryMap",JSON.toJSONString(GlobalShoppingConstants.countryMap));
前台代码如下(Velocity):
<li>
<span >购买地:</span>
<div>
<select id="continent">
<option value="" selected="selected">洲</option>
#foreach($value in $!continentMap.keySet())
<option value="$value">$!continentMap.get($value)</option>
#end
</select>
<select id="country" name="purchaseLocationNo">
<option value="" selected="selected">国家和地区</option>
</select>
</div>
</li>
<script>
$(document).ready(function(){
var list = $!continentContryMap;
// list = {
// "EO":["EOFI","EOSE","EONO","EOIS","EOCK","EORU","EOPL","EOCS","EOHU","EODE","EOAT","EOCH","EOGB","EONL","EOBE","EOFR","EOGR","EOIT","EOES","EOPT"],
// "AS":["ASHK","ASMO","ASTW","ASJP","ASKR","ASNP","ASBD","ASIN","ASPK","ASLK","ASMV","ASPH","ASNV","ASKH","ASTH","ASMY","ASSG","ASIL","ASSA","ASBH","ASQA","ASAE","ASTR"],
// "AF":["AFKE","AFSC","AFEG","AFZA"],
// "OC":["OCAU","OCGU","OCFJ","OCNZ"],
// "AM":["NAUS","NACA","SACO","SAPE","SABR","SACL","SAAR","SAUY","SAVE"]
// };
var list2 = $!continentMap;
// list2 = {
// "AFEG":"埃及","AFKE":"肯尼亚","AFSC":"塞舌尔","AFZA":"南非","ASAE":"阿联酋","ASBD":"孟加拉","ASBH":"巴林","ASHK":"香港","ASIL":"以色列",
// "ASIN":"印度","ASJP":"日本","ASKH":"柬埔寨","ASKR":"韩国","ASLK":"斯里兰卡","ASMO":"澳门","ASMV":"马尔代夫","ASMY":"马来西亚","ASNP":"尼泊尔",
// "ASNV":"越南","ASPH":"菲律宾","ASPK":"巴基斯坦","ASQA":"卡塔尔","ASSA":"沙特阿拉伯","ASSG":"新加坡","ASTH":"泰国","ASTR":"土耳其","ASTW":"台湾",
// "EOAT":"奥地利","EOBE":"比利时","EOCH":"瑞士","EOCK":"丹麦","EOCS":"捷克","EODE":"德国","EOES":"西班牙","EOFI":"芬兰","EOFR":"法国","EOGB":"英国",
// "EOGR":"希腊","EOHU":"匈牙利","EOIS":"冰岛","EOIT":"意大利","EONL":"荷兰","EONO":"挪威","EOPL":"波兰","EOPT":"葡萄牙","EORU":"俄罗斯","EOSE":"瑞典",
// "NACA":"加拿大","NAUS":"美国","OCAU":"澳大利亚","OCFJ":"斐济","OCGU":"关岛","OCNZ":"新西兰","SAAR":"阿根廷","SABR":"巴西","SACL":"智利","SACO":"哥伦比亚",
// "SAPE":"秘鲁","SAUY":"乌拉圭","SAVE":"委内瑞拉"
// };
// 获取洲和国家
var code1 = $("#continent").find("option:selected").val();
var htmlNew = "<option value='' selected='selected'>国家和地区</option>";
var countryList = list[code1];
if(countryList){
$.each(countryList, function(i,countryCode){
htmlNew += "<option value='" + countryCode + "'>" + list2[countryCode] + "</option>";
});
}
$("#country").html(htmlNew);
var selectedcountry = sessionStorage.getItem("countryCode");
$("#country").val(selectedcountry);// 主要是为了解决请求错误后跳到错误页面,然后再返回此页面时国家选中值丢失的情况
});
$("#continent").change(function(){
var code = $("#continent").find("option:selected").val();
var htmlNew = "<option value='' selected='selected'>国家和地区</option>";
var countryList = list[code];
if(countryList){
$.each(countryList, function(i,countryCode){
htmlNew += "<option value='" + countryCode + "'>" + list2[countryCode] + "</option>";
});
}
$("#country").html(htmlNew);
});
$("#country").change(function(){
var code2 = $("#country").find("option:selected").val();
sessionStorage.setItem("countryCode", code2);//存在session中
});
</script>