HTML的级联Select

      系统开发中，经常遇到级联Select的状况，而级联的Select Option数据一般记录于DB，如果每次都重新写一套级联Select，工作将是繁琐滴。。。

      一般来说，写一套级联的Select的几个步骤：

1. 从DB读取Select Option的级联数据
2. 将数据封装成JSON或xml传到前台
3. 在前台由JS动态组装/填充Select元素
4. 用JS调整各个级联Select之间的交互，如父Select值发生改变，重新填充子Select的选项，并清空子Select的已选值

　　而这次，想写一套可重用的代码，便于以后有需要的时候可方便的搬进以后的项目，本代码依赖于

1. Gson 2.2.4
2. Jquery 1.6.1

　　

　　Kick-off：

　　首先，由于是Demo，我们不从DB查询数据，只是用Collection直接模拟数据，为了便于生成JSON，使用Gson转换，为了组装级联数据结构方便，使用Selector.java和SelectorOption.java作为存储的结构：

  1 import java.io.IOException;
  2 import java.util.ArrayList;
  3 import java.util.HashMap;
  4 import java.util.List;
  5 import java.util.Map;
  6 
  7 import javax.servlet.ServletException;
  8 import javax.servlet.http.HttpServlet;
  9 import javax.servlet.http.HttpServletRequest;
 10 import javax.servlet.http.HttpServletResponse;
 11 
 12 import com.google.gson.Gson;
 13 import com.google.gson.GsonBuilder;
 14 
 15 public class CascapeSelectorServlet extends HttpServlet {
 16     private static final long serialVersionUID = 1L;
 17        
 18     public CascapeSelectorServlet() {
 19         super();
 20     }
 21 
 22     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 23         this.doPost(request, response);
 24     }
 25 
 26     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 27         
 28         /* country */
 29         Selector countrySelector = new Selector("country", null, getCountry());
 30         
 31         /* province */
 32         Selector provinceSelector = new Selector("province", null, new HashMap());
 33         List<SelectorOption> provinceList = getProvince();
 34         for (int i = 0; i < provinceList.size(); i++) {
 35             provinceSelector.put(provinceList.get(i).getParent(), provinceList.get(i));
 36         }
 37         
 38         /* city */
 39         Selector citySelector = new Selector("city", null, new HashMap());
 40         List<SelectorOption> cityList = getCity();
 41         for (int i = 0; i < cityList.size(); i++) {
 42             citySelector.put(cityList.get(i).getParent(), cityList.get(i));
 43         }
 44         
 45         Map dataMap = new HashMap();
 46         dataMap.put("country", countrySelector);
 47         dataMap.put("province", provinceSelector);
 48         dataMap.put("city", citySelector);
 49         
 50         /* Gson */
 51         GsonBuilder gsonBuilder = new GsonBuilder();
 52         gsonBuilder.setPrettyPrinting();
 53         Gson gson = gsonBuilder.create();
 54         
 55         /* To json */
 56         String json = gson.toJson(dataMap);
 57         
 58         System.out.println("json -> " + json);
 59         response.getWriter().write(json);
 60     }
 61     
 62     /**
 63      * Analog data
 64      * @return
 65      */
 66     private List<SelectorOption> getCountry() {
 67         List countryList = new ArrayList();
 68         countryList.add(new SelectorOption("cn", "China"));
 69         countryList.add(new SelectorOption("uk", "United Kingdom"));
 70         countryList.add(new SelectorOption("ca", "Canada"));
 71         countryList.add(new SelectorOption("us", "United States"));
 72         
 73         return countryList;
 74     }
 75     
 76     /**
 77      * Analog data
 78      * @return
 79      */
 80     private List<SelectorOption> getProvince() {
 81         List provinceList = new ArrayList();
 82         provinceList.add(new SelectorOption("hb", "Heibei", "cn"));
 83         provinceList.add(new SelectorOption("zj", "Zhejiang", "cn"));
 84         provinceList.add(new SelectorOption("gd", "Guangdong", "cn"));
 85         provinceList.add(new SelectorOption("gx", "Guangxi", "cn"));
 86         provinceList.add(new SelectorOption("ca", "California", "us"));
 87         
 88         return provinceList;
 89     }
 90     
 91     /**
 92      * Analog data
 93      * @return
 94      */
 95     private List<SelectorOption> getCity() {
 96         List cityList = new ArrayList();
 97         cityList.add(new SelectorOption("gz", "Guangzhou", "gd"));
 98         cityList.add(new SelectorOption("nn", "Nanning", "gx"));
 99         cityList.add(new SelectorOption("fs", "Foshan", "gd"));
100         cityList.add(new SelectorOption("hz", "Huizhou", "gd"));
101         cityList.add(new SelectorOption("la", "Los Angeles", "ca"));
102         
103         return cityList;
104     }
105 
106 }

CascapeSelectorServlet.java