使用AJAX实现级联动态选择框效果

直奔主题是我个一贯作风，这次也不例外，首先声明的一点是这里主要借助于prototype（1.5）来实现：
view:

1. <form action="genDatas" method="post">  
2. <span>  
3.  <select name="firstData" id="firstData">  
4.     <option value="0">请选择   
5.     <option value="1">data1   
6.     <option value="2">data2   
7.     <option value="3">data3   
8.  select>--   
9. <span id="sys_tag_div">  
10.  <select name="secondData" id="secondData">  
11.     <option value="0">请选择   
12.  select>  
13.  span>  
14. <script language="javascript" type="text/javascript">  
15. new Form.Element.EventObserver('firstData',
     function(element, value) {new Ajax.Updater('sys_tag_div', 
    '/ajaxweb/select_data', 
    {asynchronous:true, evalScripts:true,
     parameters:'firstData='+value+'&secondData='})})   
16. script>  
17. <script>  
18. new Ajax.Updater("sys_tag_div", "/ajaxweb/select_data", 
    {asynchronous:true, evalScripts:true, 
    parameters:"firstData="+$("firstData").value+"&secondData="});script>  
19. span>  
20. form>  

然后是Servlet的实现：/ajaxweb/select_data:

1. package ec.snow.ajax;   
2. import java.io.*;   
3. import java.util.*;   
4. import javax.servlet.*;   
5. import javax.servlet.http.*;   
6.   
7. public class SelectDataServlet extends HttpServlet   
8. {      
9.        
10.     public void doGet(HttpServletRequest request,   
11.                       HttpServletResponse response)   
12.         throws IOException, ServletException   
13.     {   
14.         response.setContentType("text/html;charset=gb2312");   
15.         String key = request.getParameter("firstData");   
16.         if((key==null)||(key.trim().length()==0))key = "0";   
17.         String secondData = getDatasInfoByKey(key);   
18.         PrintWriter out = response.getWriter();   
19.         out.println(secondData);   
20.     }   
21.     public void doPost(HttpServletRequest request,   
22.                       HttpServletResponse response)   
23.         throws IOException, ServletException   
24.     {   
25.         doGet(request,response);   
26.     }   
27.        
28.     private String getDatasInfoByKey(String key){   
29.         String secondData = "&lg;select name='secondData'><option value='0'>请选择";   
30.         Map datas = dataFromDb();   
31.         String res = datas.get(key);   
32.         if(res!=null){   
33.           secondData+=res;   
34.         }   
35.         return secondData+"</select>";   
36.     }   
37.     private Map dataFromDb(){   
38.        Map datas = new HashMap();   
39.        datas.put("1","&lt;option value='11'&gt;data11data12");   
40.        datas.put("2","data21data22data23");   
41.        datas.put("3","data31data32data33");   
42.        return datas;   
43.     }       
44. }  

经过如此处理，就一切OK了，事情就是这么简单，当然这是最底限度的代码了，如果还需要其他的…………，请仔细看看prototype.js，或者yahoo UI