JavaEE 如何实现三级联动（省市县）？

例：实现省市县的三级联动！我运行就只有第一个Select里面有值，后面的都不出现联动，请问大侠们怎么修改代码才能出现联动呀！
index.jsp<select name="city1" id="city1" onChange="changepro('city2','city1');">
              <option value="" selected>省/直辖市</option>
              <option value='北京市'>北京市</option>
              <option value='天津市'>天津市</option>
              ..........
</select></td>
          <td><select name="city2" id="city2" onChange="changecity('city3','city2');">
              <option value="">请选择</option>
          </select></td>
          <td><select name="city3" id="city3">
              <option value="">请选择</option>
          </select>

selectarea.jsvar lmcount;
var lmcount2;
lm=new Array();
lm2=new Array();

lm[0]=new Array("北京辖区","北京市");

lm[1]=new Array("北京辖县","北京市");

lm[2]=new Array("天津辖区","天津市");

lm[3]=new Array("天津辖县","天津市");
                  ........lmcount=345;//全国市的数目
lmcount2=3144;//全国县的数目
//定义函数：用于联动省和市两级-----city为市级下拉框的id名，pro为省下拉框的id 号。用法：onChange="changepro('省id名','市id名');"///////////////////
function changepro(city,pro)
{
var city=city;
var pro=document.getElementById(pro).value;
var i;
document.getElementById(city).length=1;
for (i=0;i<lmcount;i++){
if (lm[i][1]==pro){
document.getElementById(city).options[document.getElementById(city).length]=new Option(lm[i][0], lm[i][0]);
}
}

}
//定义函数：用于联动市和县两级-----county 为县级下拉框的id名，city为市下拉框的id 号。用法：onChange="changecity('市id名','县id名');"///////////////////
function changecity(county,city)
{
var county=county;
var city=document.getElementById(city).value;
var j;
document.getElementById(county).length=1;
for (j=0;j<lmcount2;j++){
if (lm2[j][1]==city){
document.getElementById(county).options[document.getElementById(county).length]=new Option(lm2[j][0], lm2[j][0]);
}
}

} // JavaScript Document

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这明显是js，怎么叫javaee问题啊？不过前台的东西，我还真不会。抱歉！
changepro这个js函数里
if (lm[i][1]==pro){
不应该是lm吧，应该有个pm[0]=new Array("石家庄市","河北省");
onchange（），当省的值出现改变，就把省的值传进去，刷新市的数据，再根据省、市的数据区刷新县的数据。
合理运用onchange事件，这哪儿是javaee问题。
有没有谁可以写一个在javaee里面能够运行的三级联动供参考，上面的那个省市县单独的HTML和js运行没有问题，但一弄进eclipse里面，就有问题，我也不知道怎么修改了现在，js学得不过硬，也不会！
  联动是跟Ajax结合JS相关的内容，看一下关于这方面的东西就OK了！
最好是用ajax 把三级城市分别2个MAP存好  KEY 放国家 value放省份的List  第二个map kye代表省 value代表市的集合  然后前台只要选择国家调用ajax 获取所有省，选择省获取所有市。
http://www.popub.net/script/pcasunzip.html
楼主可以试下这个，js引到项目里面，页面直接通过js调用即可，很简单。
如果学了ajax这种实现就方便了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>列表框中事件应用</title>
    <script type="text/javascript"
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript"
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .clsInit{width:435px;height:35px;line-height:35px;padding-left:10px}
           .clsTip{padding-top:5px;background-color:#eee;display:none}
           .btn {border:#666 1px solid;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
  <script type="text/javascript">
      $(function() {
          function objInit(obj) {//下拉列表框初始化
              return $(obj).html("<option>请选择</option>");
          }
          var arrData = { //定义一个数组保存相关数据
              厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
              厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
              厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
          };          $.each(arrData, function(pF) { //遍历数据增加厂商项
              $("#selF").append("<option>" + pF + "</option>");
          });          $("#selF").change(function() { //厂商列表框选项改变事件
              objInit("#selT");
              objInit("#selC");              $.each(arrData, function(pF, pS) {
                  if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配                      $.each(pS, function(pT, pC) { //遍历数据增加品牌项
                          $("#selT").append("<option>" + pT + "</option>");
                      });                      $("#selT").change(function() { //品牌列表框选项改变事件
                          objInit("#selC");
                          $.each(pS, function(pT, pC) {                              if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配                                  $.each(pC.split(","), function() { //遍历数据增加型号项
                                      $("#selC").append("<option>" + this + "</option>");
                                  });
                              }
                          });
                      });                  }
              });
          });          $("#Button1").click(function() { //注册按钮单击事件
              var strValue = "您选择的厂商:";
              strValue += $("#selF option:selected").text();
              strValue += " 您选择的品牌:";
              strValue += $("#selT option:selected").text();
              strValue += " 您选择的型号:";
              strValue += $("#selC option:selected").text();
              $("#divTip")
              .show()
              .addClass("clsTip")
              .html(strValue); //显示提示信息并增加样式
          });
      })
       </script>
</head>
<body>
     <div class="clsInit">
       厂商：<select id="selF"><option>请选择</option></select>
       品牌：<select id="selT"><option>请选择</option></select>
       型号：<select id="selC"><option>请选择</option></select>
       <input id="Button1" type="button" value="查询" class="btn" />
    </div>
    <div class="clsInit" id="divTip"></div>
</body>
</html>
onchange + ajax + 后台数据（key parentKey value）
还可以在js这层优化一下  AJAX提交前可以判断一下是否已经取过这个key的数据，未取过的则发起AJAX请求取数据更新内容并且存储在JS一Array，有的就直接在JS这里拿出来。
这是两级联通的，下面是服务端：
package com.briup.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class CityServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
Map<String, List<String>> citys=new HashMap<String, List<String>>();
List<String> bList=new ArrayList<String>();
bList.add("东城");
bList.add("西城");
bList.add("崇文");
citys.put("bj", bList);
List<String> tList=new ArrayList<String>();
tList.add("和平");
tList.add("河东");
tList.add("河西");
citys.put("tj", tList);
//北京-东城-西城-崇文
//天津-和平-河东-河西

String city=request.getParameter("city");

List<String> list=citys.get(city);
//System.out.println(list);
String result="";
for(String s:list){
result+=s+"-";
}
response.setContentType("text/plain");
PrintWriter writer=response.getWriter();
writer.print(result);
}
}
下面是页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title> New Document </title>
</head>
<body>

  <select id="city">
   <option value="bj">北京</option>
   <option value="tj">天津</option>
  </select>
  <select id="country"></select>

  <script type="text/javascript">
   var city=document.getElementById("city");
   city.onchange=function(){
   var value=this.value;
   var xhr;
   if(window.XMLHttpRequest){
   xhr=new XMLHttpRequest();
   }else if(window.ActiveXObject){
   xhr=new ActiveXObject("Microsoft.XMLHttp");
   }    xhr.onreadystatechange=function(){

   if(xhr.readyState==4){

   if(xhr.status==200){//下面的不运行代表页面有错误
   var content=xhr.responseText;
   var countrys=content.split("-");

   var c=document.getElementById("country");
   var children=c.childNodes;
   while(c.hasChildNodes()){//把之前的节点全部删除
   c.removeChild(children[0]);
   }
   //添加新的节点
   for(var i=0;i<countrys.length-1;i++){
   var option=document.createElement("option");

   option.innerHTML=countrys[i];

   c.appendChild(option);
   }
   }
   }
   }
   xhr.open("GET","cityServlet?city=" + value,true);
   xhr.send(null);
   }

</script>

</body>
</html>
上面的那个例子我试验过了。能用
以前做的一个，三级稍微麻烦点，就是多加一个县级的servlet，原理一样。
jquery+Ajax很容易啊,参考下11楼的
http://download.csdn.net/detail/s478853630/4396538dwr版省市县三级联动的示例，全国各地省市县数据大全，一共三千五百多条数据，好不容易从老项目中整理出来的，免分下载，分享给大家！！
写3个下拉列表
第一个（省份）的select事件控制第二个（地市）的load事件
第二个的select事件再控制第三个（区县）的load事件
就这么简单
还是用ajax吧，全国省市区县加起来至少有2000多个，这么多数据都放到页面谁打开这网页谁死机
ajax呗 jquery的 dwr的都行
用的技术 js遍历数据（后台传来的城市）
js控制数据放在select里
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>三级联动</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
      </head>

  <body>
    <select id="sheng" name="sheng">
     <option value="">请选择...</option>
    </select>
    <select id="shi" name="shi">
     <option value="">请选择...</option>
    </select>
    <select id="qu" name="qu">
     <option value="">请选择...</option>
    </select>
  </body>
  <script type="text/javascript">
$(document).ready( function(){
$.get("listSheng",function(data,textStatus){
   //alert(data);
   var dataObj = eval(data);
   for(var i=0; i<dataObj.length; i++ ){
   $option = $("<option></option>");
   $option.attr("value",dataObj[i].id);
   $option.text(dataObj[i].name);
   $("#sheng").append($option);
   }
   },"text");
});

$("#sheng").change(function(){
var id = this.value;
$("#shi option[value!='']").remove();
$("#qu option[value!='']").remove();
$.post("listShi?id="+id,function(data,textStatus){
/*$("#shi option").each(function(index,domEle){
if(index!=0){
$(this).remove();
}
});*/

//alert(data);
var dataObj = eval(data);
   for(var i=0; i<dataObj.length; i++ ){
   $option = $("<option></option>");
   $option.attr("value",dataObj[i].id);
   $option.text(dataObj[i].name);
   $("#shi").append($option);
   }
},"text");
});

$("#shi").change(function(){
var id = this.value;
$("#qu option[value!='']").remove();
$.post("listQu?id="+id,function(data,textStatus){
//alert(data);
var dataObj = eval(data);
$("#shi").length=0;
   for(var i=0; i<dataObj.length; i++ ){
   $option = $("<option></option>");
   $option.attr("value",dataObj[i].id);
   $option.text(dataObj[i].name);
   $("#qu").append($option);
   }
},"text");
});
  </script>
</html>
最好把地区做成字典表
然后读取缓存中，然后每次读的时候直接从缓存中读取，就可以了
可以ajax动态加载