日期:2014-05-19  浏览次数:20687 次

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

var 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

------解决方案--------------------
HTML code

<!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 = { //