读书人
栏目▼

JavaEE 怎么实现三级联动（省市县）

发布时间： 2012-11-09 10:18:48 作者： rapoo

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 = { //定义一个数组保存相关数据              厂商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> 
 
[解决办法]
这是两级联通的，下面是服务端：
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> 
 
[解决办法]
http://download.csdn.net/detail/s478853630/4396538

dwr版省市县三级联动的示例，

全国各地省市县数据大全，一共三千五百多条数据，

好不容易从老项目中整理出来的，

免分下载，分享给大家！！
[解决办法]
写3个下拉列表
第一个（省份）的select事件控制第二个（地市）的load事件
第二个的select事件再控制第三个（区县）的load事件
就这么简单
[解决办法]
ajax呗 jquery的 dwr的 都行 
用的技术 js遍历数据（后台传来的城市）
js控制数据放在select里
[解决办法]
探讨

http://download.csdn.net/detail/s478853630/4396538

dwr版省市县三级联动的示例，

全国各地省市县数据大全，一共三千五百多条数据，

好不容易从老项目中整理出来的，

免分下载，分享给大家！！

[解决办法]
Java code
<!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>    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  </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动态加载
读书人网 >J2EE开发

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net