用你所知道的方式，做一个地址联动，大家互相分享一下

首先我发自己写的一个，不是很完美。
大家踊跃参与啊，加上后台代码的也可以。
纯技术交流~~！，也可以给新手们一些参考<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档-SH!</title>
<script>
var addlist = new Array()
function init(){
var address1 = {name:"广东省",id:1,pid:0}
var address2 = {name:"湖南省",id:2,pid:0}
var address3 = {name:"广州市",id:3,pid:1}
var address4 = {name:"江门市",id:4,pid:1}
var address5 = {name:"长沙市",id:5,pid:2}
var address6 = {name:"怀化市",id:6,pid:2}
var address7 = {name:"鹤城区",id:7,pid:5}
var address8 = {name:"天河区",id:8,pid:3}
var address9 = {name:"黔城区",id:9,pid:6}
var address10 = {name:"江门区",id:10,pid:4}
addlist[0] = address1;
addlist[1] = address2;
addlist[2] = address3;
addlist[3] = address4;
addlist[4] = address5;
addlist[5] = address6;
addlist[6] = address7;
addlist[7] = address8;
addlist[8] = address9;
addlist[9] = address10;
var shen = document.getElementById("select1");
shen.options.length = 0;
shen.options.add(new Option("-请选择-",99));
for(i=0;i<addlist.length;i++){
     var ares = addlist[i];
if(ares.pid == 0){
shen.options.add(new Option(ares.name,ares.id));
}
}
}   function shen(){
        var shen = document.getElementById("select1");
var shi = document.getElementById("select2");
var xian = document.getElementById("select3");
if(shen.value == 99){
    shi.options.length = 0;
    shi.options.add(new Option("--市--",99));
shi.disabled = true;
xian.disabled = true;
    xian.options.length = 0;
    xian.options.add(new Option("--县--",99));
}else {
   xian.disabled = true;
   xian.options.length = 0;
   xian.options.add(new Option("--县--",99));
   shi.disabled = false;
   shi.options.length = 0;
   for(i=0;i<addlist.length;i++){
        var ares = addlist[i];
if(ares.pid == shen.value){
             shi.options.add(new Option(ares.name,ares.id));
            }
   }
   }
   }
    function shi(){
        var shi = document.getElementById("select2");
var xian = document.getElementById("select3");
xian.disabled = false;
   xian.options.length = 0;
   for(i=0;i<addlist.length;i++){
        var ares = addlist[i];
if(ares.pid == shi.value){
             xian.options.add(new Option(ares.name,ares.id));
            }
   }
   }
</script>
</head><body onload="init()">  <select name="select" id="select1" onchange="shen()">
     <option value="-1" selected="selected">-请选择-</option>
  </select>
   <select name="select" id="select2" disabled="disabled" onchange="shi()">
   <option value="-1" selected="selected">--市--</option>
  </select>
   <select name="select" id="select3"  disabled="disabled">
   <option value="-1" selected="selected">--县--</option>
  </select>
</body>
</html>

解决方案 »

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

3级联动,以下:
<body>
<div align="center">
<form name="form1">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>我的办公室</option>
<option>个人事务</option>
<option>办公助理</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected>今日办公</option>
<option value=" ">公共信息</option>
<option value=" ">部门信息</option>
</select>
<select name="stage3" size="1">
<option value=" " selected>任务</option>
<option value=" ">日志</option>
<option value=" ">提醒</option>
</select></table>
</form></div>
<script language="JavaScript">

</script>
ajax查数据库。直接这样代码写死太累了也不灵活。
个人认为其实在页面中完成多级联动是相对来说简单易懂的一种方式，但个人不喜欢无论是使用DOM技术加入OPTION元素，还是用JavaScript生成OPTION代码，都会在客户端生成大量代码，这样会使用户的浏览速度成为问题，而且也不易维护，想看懂都很难。你可以想象多级联动选择框最常用的就是用来做所在地选择，就以我国为例如果想将全国的主要大中城市都囊括进来，代码量可想而知。所以个人喜欢AJAX的动态技术，但并不支持一定要使用AJAX的开发库例如JQUERY等，虽然这么做会为程序员减轻一定的代码量但，个人认为几十行的代码与一个整个的开发库比起来简直是小巫见大巫。随意个人意见是推荐有意学习的各位尝试使用AJAX技术来实现多级联动，也可以深入了解AJAX。（PS：个人意见仅供参考~）
同意楼上的观点，如果一个省市改名了网站就需要全部改。用ajax技术好一些，不但速度快而且灵活性好很多。也可以用flash做。
如果代码写死存在意义就不大了
同意楼上的观点，如果一个省市改名了网站就需要全部改。用ajax技术好一些，不但速度快而且灵活性好很多。也可以用flash做。
如果代码写死存在意义就不大了
补充一个用ajax实现的地址联动，数据库查询部分省略，不是最完美的方法，大致思路是这样的。Address.jsp<%@ page language="java" pageEncoding="UTF-8"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
  <select name="select" id="select1" onclick="checkshen()" onchange="checkshenchang()">
     <option value="-1" selected="selected">-请选择-</option>
  </select>
   <select name="select" id="select2" onchange="checkshichang()">
   <option value="-1" selected="selected">--市--</option>
  </select>
   <select name="select" id="select3">
   <option value="-1" selected="selected">--县--</option>
  </select>
</body>JavaScriptvar xmlRequest;
function createXMLHttpRequest(){
    if(window.XMLHttpRequest){
         xmlRequest = new XMLHttpRequest();
         if(xmlRequest.overrideMimeType){
            // xmlRequest.overrideMimeType("text/xml");
         }
    }else if(window.ActiveXObject){
      var activexName = ["MSXML2.XMLHTTP.6.0",
                         "MSXML2.XMLHTTP.5.0",
                         "MSXML2.XMLHTTP.4.0",
                         "MSXML2.XMLHTTP.3.0",
                         "MSXML2.XMLHTTP",
                         "Miscrosoft.XMLHTTP"];
      for(var i = 0;i < activexName.length;i++){
           try{
               xmlRequest = new ActiveXObject(activexName[i]);
               break;
           }catch(e){
               continue;
           }
      }
    }
     if(xmlRequest == undefined || xmlRequest == null){
        alert("当前浏览器不支持创建XMLHttpResuest对象，请更换浏览器！");
    }
}
function checkshen(){
   var shen = document.getElementById("select1");
   if(shen.options.length <= 1){
        createXMLHttpRequest();
        xmlRequest.onreadystatechange = callback;
        xmlRequest.open("GET","StringsServlet?type=shen");
        xmlRequest.send(null);
    }
}
function callback(){
    if(xmlRequest.readyState == 4){
        if(xmlRequest.status == 200){
            var shen = document.getElementById("select1");
            shen.options.length = 0;
            shen.options.add(new Option("-请选择-","-1"));
            var json = eval(xmlRequest.responseText);
             for(i=0;i<json.length;i++){
                shen.options.add(new Option(json[i].name,json[i].id));
             }
        }
    }
} function checkshenchang(){
  var shenid = document.getElementById("select1").value;
    createXMLHttpRequest();
    xmlRequest.onreadystatechange = callback2;
    xmlRequest.open("GET","StringsServlet?type=shi&shenid="+shenid);
    xmlRequest.send(null);
}
function callback2(){
    if(xmlRequest.readyState == 4){
        if(xmlRequest.status == 200){
            var shi = document.getElementById("select2");
            shi.options.length = 0;
            var json = eval(xmlRequest.responseText);
             for(i=0;i<json.length;i++){
                shi.options.add(new Option(json[i].name,json[i].id));
             }
        }
    }
}function checkshichang(){
  var shiid = document.getElementById("select2").value;
    createXMLHttpRequest();
    xmlRequest.onreadystatechange = callback3;
    xmlRequest.open("GET","StringsServlet?type=xian&shiid="+shiid);
    xmlRequest.send(null);
}
function callback3(){
    if(xmlRequest.readyState == 4){
        if(xmlRequest.status == 200){
            var xian = document.getElementById("select3");
            xian.options.length = 0;
            var json = eval(xmlRequest.responseText);
             for(i=0;i<json.length;i++){
                xian.options.add(new Option(json[i].name,json[i].id));
             }
        }
    }
}
StringsServletpublic class StringsServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

private StringBuffer getJsonString(List<Address> adlist){
StringBuffer sb = new StringBuffer();
sb.append("[");
for(int i=0; i<adlist.size();i++){
if(i >= 1){
sb.append(",");
}
Address address =new Address();
address = adlist.get(i);
sb.append("{'id':'"+address.getId()+"','name':'"+address.getName()+"'}");
}
sb.append("]");
System.out.println(sb.toString());
return sb;
} @Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
List<Address> adlist = new ArrayList<Address>();
AddressService adService = new AddressService();
String shenid = null;
String type = null;
String shiid = null;
if(request.getParameter("type") != null){
type = request.getParameter("type");
}
if(request.getParameter("shenid") != null){
shenid = request.getParameter("shenid");
}
if(request.getParameter("shiid") != null){
shiid = request.getParameter("shiid");
}
if(type.equals("shen")){
adlist = adService.getAllShen();
out.print(getJsonString(adlist));
}else if(type.equals("shi")){
if(shenid != null){
adlist = adService.getAllShi(shenid);
out.print(getJsonString(adlist));
}
}else if(type.endsWith("xian")){
if(shiid != null){
adlist = adService.getAllxian(shiid);
out.print(getJsonString(adlist));
}
}
}
}AddressServiceprivate static AddressDao addressDao = null;
public AddressService(){
addressDao = new AddressDao();
}
public List<Address> getAllShen(){
return addressDao.getAllShen();
}
public List<Address> getAllShi(String shenid){
return addressDao.getAllShi(shenid);
}
public List<Address> getAllxian(String shiid){
return addressDao.getAllxian(shiid);
}
AddressDaopublic List<Address> getAllShen(){
List<Address> adlist = new ArrayList<Address>();
Address  ad1 = new Address();
ad1.setId(1);
ad1.setPid(0);
ad1.setName("广东省");
Address  ad2 = new Address();
ad2.setId(2);
ad2.setPid(0);
ad2.setName("广西省");
Address  ad3 = new Address();
ad3.setId(3);
ad3.setPid(0);
ad3.setName("湖南省");
Address  ad4 = new Address();
ad4.setId(4);
ad4.setPid(0);
ad4.setName("湖北省");

adlist.add(ad1);
adlist.add(ad2);
adlist.add(ad3);
adlist.add(ad4);
return adlist;
}

public List<Address> getAllShi(String shenid){
List<Address> adlist = new ArrayList<Address>();
Address  ad1 = null;
Address  ad2 = null;
if(shenid.equals("1")){
ad1 = new Address();
ad1.setId(5);
ad1.setPid(1);
ad1.setName("广州市");
ad2 = new Address();
ad2.setId(6);
ad2.setPid(1);
ad2.setName("江门市");
}else if(shenid.equals("2")){
ad1 = new Address();
ad1.setId(7);
ad1.setPid(2);
ad1.setName("桂林市");
ad2 = new Address();
ad2.setId(8);
ad2.setPid(2);
ad2.setName("玉林市");
}else if(shenid.equals("3")){
ad1 = new Address();
ad1.setId(9);
ad1.setPid(3);
ad1.setName("长沙市");
ad2 = new Address();
ad2.setId(10);
ad2.setPid(3);
ad2.setName("衡阳市");
}else if(shenid.equals("4")){
ad1 = new Address();
ad1.setId(11);
ad1.setPid(4);
ad1.setName("武汉市");
ad2 = new Address();
ad2.setId(12);
ad2.setPid(4);
ad2.setName("黄冈市");
}
adlist.add(ad1);
adlist.add(ad2);
return adlist;
}
public List<Address> getAllxian(String shiid){
List<Address> adlist = new ArrayList<Address>();
Address  ad1 = null;
Address  ad2 = null;
if(shiid.equals("5")){
ad1 = new Address();
ad1.setId(5);
ad1.setPid(1);
ad1.setName("广州市第一个县");
ad2 = new Address();
ad2.setId(6);
ad2.setPid(1);
ad2.setName("广州市第二个县");
}else if(shiid.equals("6")){
ad1 = new Address();
ad1.setId(7);
ad1.setPid(2);
ad1.setName("江门市第一个县");
ad2 = new Address();
ad2.setId(8);
ad2.setPid(2);
ad2.setName("江门市第二个县");
}else if(shiid.equals("7")){
ad1 = new Address();
ad1.setId(9);
ad1.setPid(3);
ad1.setName("桂林市第一个县");
ad2 = new Address();
ad2.setId(10);
ad2.setPid(3);
ad2.setName("桂林市第二个县");
}else if(shiid.equals("8")){
ad1 = new Address();
ad1.setId(11);
ad1.setPid(4);
ad1.setName("玉林市第一个县");
ad2 = new Address();
ad2.setId(12);
ad2.setPid(4);
ad2.setName("玉林市第二个县");
}
adlist.add(ad1);
adlist.add(ad2);
return adlist;
}
pojo Addresspublic class Address { private int pid;
private int id;
private String name;
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}