[求助]关于省份，城市下拉框连动的问题

<form name="dataForm"  id="dataForm" action="" method="POST" target="dataFrame"  style="margin: 0">
<div class="InnerDiv" style="width: 780px;">
    <table align=right border=0 style="height:150; width:100%">
        <tr>
            <td nowrap align=right>所在省份：</td>
            <td><select name=province style="width:100px" ><base:optionsFromCode codeId="provinceName"/></select></td>
            <td nowrap align=right>所在城市：</td>
            <td><input name="city" style="width:100px"></td>
        </tr>
    </table>
</div>
</form> var areaList={
"100":[["选择城区"],["东城区"],["西城区"],["崇文区"],["宣武区"],["朝阳区"],["丰台区" ],["石景山区" ],["海淀区" ],["门头沟区" ],["房山区" ],["通州区" ],["顺义区" ],["延庆县" ],["昌平县" ],["怀柔县" ],["密云县" ],["平谷县" ],["大兴县" ]],
"200":[["选择城区"],["和平区" ],["河东区" ],["河西区" ],["南开区" ],["河北区" ],["红桥区" ],["塘沽区" ],["大港区" ],["汉沽区" ],["东丽区" ],["西青区" ],["津南区" ],["北辰区" ],["蓟县","22"],["宝坻县" ],["武清县" ],["宁河县" ],["静海县" ]],
"300":[["选择城区"],["南市区" ],["卢湾区" ],["徐汇区" ],["长宁区" ],["静安区" ],["普陀区" ],["闸北区" ],["虹口区" ],["杨浦区" ],["闵行区" ],["宝山区" ],["嘉定区" ],["浦东新区" ],["金山区" ],["松江区" ],["崇明县" ],["青浦县" ],["南汇县" ],["奉贤县" ],["黄浦区" ]]
                  };
province在数据库存的有值,100代表北京,200代表天津,300代表上海,city也是数值存入数据库,如东城区为101,西城区为102,和平区为201等等
要在javascript里定义事件函数.怎么才能让省份和城市产生连动,选择省份就会有相应的城市对应在里面,求高手解答下

解决方案 »

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

我有个例子，把我的数据改下就可以了<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
var s=["s1","s2"];
var opt0 = ["请选择","请选择"];
function setup()
{
for(i=0;i<s.length-1;i++)
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
change(0);
}
//##联动菜单结束-->
</SCRIPT>调用：<select name="lz_sf" id="s1">
<option></option></select>
<select name="lz_sx" id="s2">
<option></option></select>
<script language="javascript">
   setup()
</script>
我强烈建议用ajax！你这样写自己最后维护是个问题！
我说的是按1楼的写，维护是个问题不是我的！
你可以用jquery，或者原始方法写个，很简单的！
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var areaList={
"v100":[["选择城区"],["东城区"],["西城区"],["崇文区"],["宣武区"],["朝阳区"],["丰台区" ],["石景山区" ],["海淀区" ],["门头沟区" ],["房山区" ],["通州区" ],["顺义区" ],["延庆县" ],["昌平县" ],["怀柔县" ],["密云县" ],["平谷县" ],["大兴县" ]],
"v200":[["选择城区"],["和平区" ],["河东区" ],["河西区" ],["南开区" ],["河北区" ],["红桥区" ],["塘沽区" ],["大港区" ],["汉沽区" ],["东丽区" ],["西青区" ],["津南区" ],["北辰区" ],["蓟县","22"],["宝坻县" ],["武清县" ],["宁河县" ],["静海县" ]],
"v300":[["选择城区"],["南市区" ],["卢湾区" ],["徐汇区" ],["长宁区" ],["静安区" ],["普陀区" ],["闸北区" ],["虹口区" ],["杨浦区" ],["闵行区" ],["宝山区" ],["嘉定区" ],["浦东新区" ],["金山区" ],["松江区" ],["崇明县" ],["青浦县" ],["南汇县" ],["奉贤县" ],["黄浦区" ]]
};function province_change(v){
var city = document.getElementById("city");
city.innerHTML = "";
eval("var citys = areaList.v"+v+";");
for(var i=0;i<citys.length;i++){
city.add(new Option(citys[i],citys[i]));
}
}
</script>
</head><body onload="province_change(document.getElementById('province').value)">
<form name="dataForm"  id="dataForm" action="" method="POST" target="dataFrame"  style="margin: 0">
<div class="InnerDiv" style="width: 780px;">
    <table align=right border=0 style="height:150; width:100%">
        <tr>
            <td nowrap align=right>所在省份： </td>
            <td> <select name=province id=province style="width:100px" onchange="province_change(this.value)">
            <option value=100>北京</option>
<option value=200>天津</option>
<option value=300>上海</option>
</select> </td>
            <td nowrap align=right>所在城市： </td>
            <td> <select name=city id=city></select> </td>
        </tr>
    </table>
</div>
</form> </body></html>建议lz放数据的时候再做点手脚
"v100":[["选择城区_"],["东城区_101"],["西城区_102"],["崇文区_103],....],
就是把城市的ID和名称放一起，通过JS再去解析
在我的例子中，city.add(new Option(citys[i].split("_")[0],citys[i].split("_")[1]));即可
可以在数据库设定city值,然后直接在页面上从数据库读出来吗,就像在数据库里存东城区为101,西城区102,然后areaList里就写"v100":[["选择城区"],["101"],["102"]] 这样可以吗?
没必要，增加后台麻烦。写个数组专门存在一个js中即可。这个Js可以用其他语言通过数据库一次性生成。
毕竟省市数据不会经常变动的。除非数组实在特别大或者需要经常维护。
我用的XML<?xml version="1.0" encoding="utf-8" ?>
<china>
    <province name="北京" cities="北京"/>

  <province name="上海" cities="上海"/>

  <province name="天津" cities="天津"/>

  <province name="重庆" cities="重庆"/>

  <province name="安徽" cities="安庆蚌埠巢湖池州滁州阜阳合肥淮北淮南黄山六安马鞍山宿州铜陵芜湖宣城亳州"/>  <province name="福建" cities="福州龙岩南平宁德莆田泉州三明厦门漳州"/>  <province name="甘肃" cities="白银定西甘南藏族自治州嘉峪关金昌酒泉兰州临夏回族自治州陇南平凉庆阳天水武威张掖"/>  <province name="广东" cities="潮州东莞佛山广州河源惠州江门揭阳茂名梅州清远汕头汕尾韶关深圳阳江云浮湛江肇庆中山珠海"/>  <province name="广西" cities="百色北海崇左防城港桂林贵港河池贺州来宾柳州南宁钦州梧州玉林"/>  <province name="贵州" cities="安顺毕节贵阳六盘水黔东南苗族侗族自治州黔南布依族苗族自治州黔西南布依族苗族自治州铜仁遵义"/>  <province name="海南" cities="白沙黎族自治县保亭黎族苗族自治县昌江黎族自治县澄迈县定安县东方海口乐东黎族自治县临高县陵水黎族自治县琼海琼中黎族苗族自治县三亚屯昌县万宁文昌五指山儋州"/>  <province name="河北" cities="保定沧州承德邯郸衡水廊坊秦皇岛石家庄唐山邢台张家口"/>  <province name="河南" cities="安阳鹤壁济源焦作开封洛阳南阳平顶山三门峡商丘新乡信阳许昌郑州周口驻马店漯河濮阳"/>  <province name="黑龙江" cities="大庆大兴安岭哈尔滨鹤岗黑河鸡西佳木斯牡丹江七台河齐齐哈尔双鸭山绥化伊春"/>  <province name="湖北" cities="武汉鄂州恩施土家族苗族自治州黄冈黄石荆门荆州潜江神农架林区十堰随州天门仙桃咸宁襄樊孝感宜昌"/>  <province name="湖南" cities="长沙常德郴州衡阳怀化娄底邵阳湘潭湘西土家族苗族自治州益阳永州岳阳张家界株洲"/>  <province name="吉林" cities="白城白山长春吉林辽源四平松原通化延边朝鲜族自治州"/>  <province name="江苏" cities="常州淮安连云港南京南通苏州宿迁泰州无锡徐州盐城扬州镇江"/>  <province name="江西" cities="抚州赣州吉安景德镇九江南昌萍乡上饶新余宜春鹰潭"/>  <province name="辽宁" cities="鞍山本溪朝阳大连丹东抚顺阜新葫芦岛锦州辽阳盘锦沈阳铁岭营口"/>  <province name="内蒙古" cities="阿拉善盟巴彦淖尔盟包头赤峰鄂尔多斯呼和浩特呼伦贝尔通辽乌海乌兰察布盟锡林郭勒盟兴安盟"/>  <province name="宁夏" cities="固原石嘴山吴忠银川"/>  <province name="青海" cities="果洛藏族自治州海北藏族自治州海东海南藏族自治州海西蒙古族藏族自治州黄南藏族自治州西宁玉树藏族自治州"/>  <province name="山东" cities="滨州德州东营菏泽济南济宁莱芜聊城临沂青岛日照泰安威海潍坊烟台枣庄淄博"/>  <province name="山西" cities="长治大同晋城晋中临汾吕梁朔州太原忻州阳泉运城"/>  <province name="陕西" cities="安康宝鸡汉中商洛铜川渭南西安咸阳延安榆林"/>  <province name="四川" cities="阿坝藏族羌族自治州巴中成都达州德阳甘孜藏族自治州广安广元乐山凉山彝族自治州眉山绵阳南充内江攀枝花遂宁雅安宜宾资阳自贡泸州"/>        <province name="西藏" cities="阿里昌都拉萨林芝那曲日喀则山南"/>    <province name="新疆" cities="阿克苏阿拉尔巴音郭楞蒙古自治州博尔塔拉蒙古自治州昌吉回族自治州哈密和田喀什克拉玛依克孜勒苏柯尔克孜自治州石河子图木舒克吐鲁番乌鲁木齐五家渠伊犁哈萨克自治州"/>    <province name="云南" cities="保山楚雄彝族自治州大理白族自治州德宏傣族景颇族自治州迪庆藏族自治州红河哈尼族彝族自治州昆明丽江临沧怒江傈傈族自治州曲靖思茅文山壮族苗族自治州西双版纳傣族自治州玉溪昭通"/>    <province name="浙江" cities="杭州湖州嘉兴金华丽水宁波绍兴台州温州舟山衢州"/>
</china>
页面JSvar xmldom = new ActiveXObject("Microsoft.XMLDOM");
var province = [];
var cities = [];
function init()
{
    xmldom.async = true;
    xmldom.onreadystatechange = statInit;
    window.setTimeout(function()
    {
        xmldom.load("city.xml");
    }
    , 10);
}function statInit()
{    if (xmldom.readyState == 4)
    {
        if (xmldom == null || xmldom.documentElement == null)
        {
            alert("XML文件不存在或没有菜单项");
            return ;
        }
        createProvince();
    }
}function createProvince() {
            var provinces = xmldom.getElementsByTagName("province");
            delitem(document.all.province);
            delitem(document.all.city);
            var index = 0;
            for (var i = 0; i < provinces.length; i++) {
                province[i] = provinces[i].getAttribute("name");
                cities[i] = provinces[i].getAttribute("cities");
                document.all.province.add(new Option(province[i], province[i]));
                if (province[i] == "<%= Province %>")
                    index = i;
            }
            document.all.province.selectedIndex = index;
            provinceChange(index);
        }
        function provinceChange(index) {
            var city = cities[index].split(" ");
            delitem(document.all.city);
            var index = 0;
            for (var i = 0; i < city.length; i++) {
                document.all.city.add(new Option(city[i], city[i]));
                if (city[i] == "<%= City %>")
                    index = i;
            }
            document.all.city.selectedIndex = index;
        }
function delitem(options)
{
    optioncount = options.length;
    for (i = optioncount - 1; i >= 0; i--)
    {
        options.options[i] = null
    }
}页面
<select id="BJEnterPrize_province" name="province"  onchange="provinceChange(this.selectedIndex)"></select>
<select id="BJEnterPrize_city" name="city"></select>
http://topic.csdn.net/u/20090524/20/51f004fc-4a45-4582-88f2-644152646184.html
over
还是XML好～谢谢，我的想法就是要用XML语言写
xml文件太牛了，什么都能做，可是我不会用啊，恳请推荐几本xml快速速成的书
lz的省、市在数据库中都有对应的ID值，估计在数据库中也是保存的关联信息
建议还是用ajax实时地去调比较好
当然，也可以放在其他地方，比如js变量中，xml文件中
但是一旦发生变动，维护起来也是一件麻烦的事
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var areaList={
"v100":[["选择城区"],["东城区"],["西城区"],["崇文区"],["宣武区"],["朝阳区"],["丰台区" ],["石景山区" ],["海淀区" ],["门头沟区" ],["房山区" ],["通州区" ],["顺义区" ],["延庆县" ],["昌平县" ],["怀柔县" ],["密云县" ],["平谷县" ],["大兴县" ]],
"v200":[["选择城区"],["和平区" ],["河东区" ],["河西区" ],["南开区" ],["河北区" ],["红桥区" ],["塘沽区" ],["大港区" ],["汉沽区" ],["东丽区" ],["西青区" ],["津南区" ],["北辰区" ],["蓟县","22"],["宝坻县" ],["武清县" ],["宁河县" ],["静海县" ]],
"v300":[["选择城区"],["南市区" ],["卢湾区" ],["徐汇区" ],["长宁区" ],["静安区" ],["普陀区" ],["闸北区" ],["虹口区" ],["杨浦区" ],["闵行区" ],["宝山区" ],["嘉定区" ],["浦东新区" ],["金山区" ],["松江区" ],["崇明县" ],["青浦县" ],["南汇县" ],["奉贤县" ],["黄浦区" ]]
};function province_change(v){
var city = document.getElementById("city");
city.innerHTML = "";
eval("var citys = areaList.v"+v+";");
for(var i=0;i<citys.length;i++){
city.add(new Option(citys[i],citys[i]));
}
}
</script>
</head><body onload="province_change(document.getElementById('province').value)">
<form name="dataForm"  id="dataForm" action="" method="POST" target="dataFrame"  style="margin: 0">
<div class="InnerDiv" style="width: 780px;">
    <table align=right border=0 style="height:150; width:100%">
        <tr>
            <td nowrap align=right>所在省份： </td>
            <td> <select name=province id=province style="width:100px" onchange="province_change(this.value)">
            <option value=100>北京</option>
<option value=200>天津</option>
<option value=300>上海</option>
</select> </td>
            <td nowrap align=right>所在城市： </td>
            <td> <select name=city id=city></select> </td>
        </tr>
    </table>
</div>
</form> </body></html>
PS:ID是唯一的怎么在数据库没关联呢！
<html>
<script type="text/javascript">
var citys=[
["西安","咸阳","宝鸡","渭南","汉中"],
["深圳","广州","中山","东莞","惠州","佛山","珠海"],
["上海"]
];
function getCity()
{
  var sltProvince=document.getElementById("province");
  var sltCity=document.getElementById("city");
  sltCity.options.length=1;
  if(sltProvince.selectedIndex>0)
  {
    var provinceCity=citys[sltProvince.selectedIndex-1];
    for(var i=0; i<provinceCity.length; i++)
    {
      var city=new Option(provinceCity[i],i);
      sltCity.options.add(city);
    }
  }
}
</script>
<body>
<select name="province" id="province" onchange="getCity();" >
  <option value="0">请选择省份</option>
  <option value="1">陕西</option>
  <option value="2">广东</option>
  <option value="3">上海</option>
</select>
<select name="city" id="city">
  <option value="0">请选择城市</option>
</select>
</body>
</html>
现在主要用Jquery，不在使用最原始的脚本了，要跟上时代哦。。
17楼的方法可以，这种二级联动，就是要做ajax+xml来做，代码少，还容易维护，我做过很多这种效果，楼主还有不明白的可以问我，其实这种效果应该有很多例子的
div一块区域，直接拼成一个select标签
我这里有个父子业务关联表：
List fuYWList=com.mcc.web.BusinesssWindow.getFuYWs();//父业务
List ziYWList=com.mcc.web.BusinesssWindow.getZiYWs();//子业务
void set_ziYW(){
com.mcc.model.Business obj_bn = new com.mcc.model.Business();
obj_bn.setBu_name(""+fuYW.selectedItem.label);
List ziYWs=null;
if(fuYW.selectedItem.value==""||fuYW.selectedItem.value==null){
ziYWs=com.mcc.web.BusinesssWindow.getZiYWs();
}
else{
ziYWs=com.mcc.web.BusinesssWindow.getBusinesss(obj_bn);
}
ziYW.getItems().clear();//bu_name清空 //添加空项
Listitem li1 = new Listitem();
li1.label = "";
li1.value = "";
li1.selected=true;
ziYW.appendChild(li1);

for(int i=0;i<ziYWs.size();i++){
Listitem li = new Listitem();
li.label = ziYWs.get(i).getBu_name();
li.value = ziYWs.get(i).getBu_id();
ziYW.appendChild(li);
}
}
实现关联：
父业务:
<listbox id="fuYW" rows="1" mold="select"   onSelect="set_ziYW()">
<listitem label="" value="" selected="true"/>
<listitem forEach="${fuYWList}"  value="${each.bu_id}" label="${each.bu_name}">
</listitem>
</listbox>
 子业务:
<listbox id="ziYW" rows="1" mold="select" >
<listitem label="" value="" selected="true"/>
<listitem forEach="${ziYWList}"  value="${each.bu_id}" label="${each.bu_name}">
</listitem>
</listbox>
一定要用AJAX？如果网络不通畅，每次更改一下选项，都要频繁访问网络？
我测试过，如果用鼠标滚轮快速滚动省份，出现过程序假死的情况另外，省市数组完全可以在后台生成，如：
StringBuilder city = new StringBuilder("var arrCity = new Array();");
city.AppendFormat("arrCity.push(['{0}','{1}']);","江苏","南京");
.........
// 把省份和城市的JS输出到页面这样，维护也没有任何问题了。
后台生成数组后，前台代码：
<html>
    <body onload="InsertProvince()">
        <form>
            省份：<select name="lstPro" onchange="ProChange(this);"></select>
            城市：<select name="lstCity"></select>
        </form>
        <script type="text/javascript">
            // 省份数组，省的ID+省的名称，从数据库中取出全部的省份，按下列格式组成一个javascript字符串
            var arrProvince = new Array(
                                new Array(1,"山东"),
                                new Array(2,"江西"),
                                new Array(3,"福建")
                             );
            // 城市数组，省的ID+城市的ID+城市的名称，从数据库中取出全部的城市，按下列格式组成一个javascript字符串
            var arrCity = new Array(
                            new Array(1,1,"济南"),
                            new Array(1,2,"青岛"),
                            new Array(1,3,"烟台"),
                            new Array(2,4,"南昌"),
                            new Array(2,5,"吉安"),
                            new Array(2,6,"九江"),
                            new Array(2,7,"赣州"),
                            new Array(2,8,"宜春"),
                            new Array(3,9,"福州"),
                            new Array(3,10,"厦门"),
                            new Array(3,11,"三明"),
                            new Array(3,12,"泉州")
                         );

            // 初始化用，填充全部的省份和第一个省份的城市用
            function InsertProvince(){
                var objPro = document.getElementById("lstPro");
                for(var i=0;i<arrProvince.length;i++){
                    var opn = new Option(arrProvince[i][1],arrProvince[i][0]);
                    objPro.options.add(opn);
                }
                ProChange(objPro);
            }             // 省份下拉框变化时，取该省份的城市填充
            function ProChange(obj){
                var objCity = document.getElementById("lstCity");
                while(objCity.options.length > 0)
                    objCity.options.remove(0);
                for(var i=0;i<arrCity.length;i++)
                    if(arrCity[i][0] == obj.value){
                        var opn = new Option(arrCity[i][2],arrCity[i][1]);
                        objCity.options.add(opn);
                    }
            }
        </script>
    </body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/youbl/archive/2008/08/04/2766173.aspx
我的Js代码和带数据库.net源码，要的..........
<html>
<script type="text/javascript">
var citys=
[
["西安","咸阳","宝鸡","渭南","汉中"],
["深圳","广州","中山","东莞","惠州","佛山","珠海"],
["上海"],
["北京","东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区"," 海淀区（中关村）","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"," 其他"],
["石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","衡水市","沧州市","邢台市","邯郸市","保定市","其他"],
["太原市","朔州市","大同市","长治市","晋城市","忻州市","晋中市","临汾市","吕梁市","运城市","其他"],
["呼和浩特市","包头市","赤峰市","呼伦贝尔市","鄂尔多斯市","乌兰察布市","巴彦淖尔市","兴安盟","阿拉善盟","锡林郭勒盟","其他"],
["沈阳市","朝阳市","阜新市","铁岭市","抚顺市","丹东市","本溪市","辽阳市","鞍山市","大连市","营口市","盘锦市","锦州市","葫芦岛市","其他"],
["长春市","白城市","吉林市","四平市","辽源市","通化市","白山市","延边朝鲜族自治州","其他"],
["哈尔滨市","七台河市","黑河市","大庆市","齐齐哈尔市","伊春市","佳木斯市","双鸭山市","鸡西市","大兴安岭地区(加格达奇)","牡丹江","鹤岗市","绥化市　","其他"],
["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县","其他"],
["南京市","徐州市","连云港市","宿迁市","淮安市","盐城市","扬州市","泰州市","南通市","镇江市","常州市","无锡市","苏州市","其他"],
["杭州市","湖州市","嘉兴市","舟山市","宁波市","绍兴市","衢州市","金华市","台州市","温州市","丽水市","其他"],
["合肥市","宿州市","淮北市","亳州市","阜阳市","蚌埠市","淮南市","滁州市","马鞍山市","芜湖市","铜陵市","安庆市","黄山市","六安市","巢湖市","池州市","宣城市","其他"],
["福州市","南平市","莆田市","三明市","泉州市","厦门市","漳州市","龙岩市","宁德市","其他"],
["南昌市","九江市","景德镇市","鹰潭市","新余市","萍乡市","赣州市","上饶市","抚州市","宜春市","吉安市","其他"],
["济南市","聊城市","德州市","东营市","淄博市","潍坊市","烟台市","威海市","青岛市","日照市","临沂市","枣庄市","济宁市","泰安市","莱芜市","滨州市","菏泽市","其他"],
["郑州市","三门峡市","洛阳市","焦作市","新乡市","鹤壁市","安阳市","濮阳市","开封市","商丘市","许昌市","漯河市","平顶山市","南阳市","信阳市","周口市","驻马店市","其他"],
["武汉市","十堰市","襄樊市","荆门市","孝感市","黄冈市","鄂州市","黄石市","咸宁市","荆州市","宜昌市","随州市","恩施土家族苗族自治州","仙桃市","天门市","潜江市","神农架林区","其他"],
["长沙市","张家界市","常德市","益阳市","岳阳市","株洲市","湘潭市","衡阳市","郴州市","永州市","邵阳市","怀化市","娄底市","湘西土家族苗族自治州","其他"],
["广州市","清远市市","韶关市","河源市","梅州市","潮州市","汕头市","揭阳市","汕尾市"," 惠州市","东莞市","深圳市","珠海市","中山市","江门市","佛山市","肇庆市","云浮市","阳江市","茂名市","湛江市"," 其他"],
["南宁市","桂林市","柳州市","梧州市","贵港市","玉林市","钦州市","北海市","防城港市","崇左市","百色市","河池市","来宾市","贺州市","其他"],
["海口市","三亚市","其他"],
["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万州区","涪陵区","黔江区","长寿区","合川市","永川市","江津市","南川市","綦江县","潼南县","铜梁县","大足县","璧山县","垫江县","武隆县","丰都县","城口县","开县","巫溪县","巫山县","奉节县","云阳县","忠县","石柱土家族自治县","彭水苗族土家族自治县","酉阳土家族苗族自治县","秀山土家族苗族自治县","其他"],
["成都市","广元市","绵阳市","德阳市","南充市","广安市","遂宁市","内江市","乐山市","自贡市","泸州市","宜宾市","攀枝花市","巴中市","资阳市","眉山市","雅安","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州县","其他"],
["贵阳市","六盘水市","遵义市","安顺市","毕节地区","铜仁地区","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","其他"],
["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","普洱市","临沧市","宁德市","德宏傣族景颇族自治州","怒江傈僳族自治州","楚雄彝族自治州","红河哈尼族彝族自治州","文山壮族苗族自治州","大理白族自治州","迪庆藏族自治州","西双版纳傣族自治州","其他"],
["拉萨市","那曲地区","昌都地区","林芝地区","山南地区","日喀则地区","阿里地区","其他"],
["西安市","延安市","铜川市","渭南市","咸阳市","宝鸡市","汉中市","安康市","商洛市","其他"],
["兰州市 ","嘉峪关市","金昌市","白银市","天水市","武威市","酒泉市","张掖市","庆阳市","平凉市","定西市","陇南市","临夏回族自治州","甘南藏族自治州","其他"],
["西宁市","海东地区","海北藏族自治州","黄南藏族自治州","玉树藏族自治州","海南藏族自治州","果洛藏族自治州","海西蒙古族藏族自治州","其他"],
["银川市","石嘴山市","吴忠市","固原市","中卫市","其他"],
["乌鲁木齐市","克拉玛依市","喀什地区","阿克苏地区","和田地区","吐鲁番地区","哈密地区","塔城地区","阿勒泰地区","克孜勒苏柯尔克孜自治州","博尔塔拉蒙古自治州","昌吉回族自治州伊犁哈萨克自治州","巴音郭楞蒙古自治州","河子市","阿拉尔市","五家渠市","图木舒克市","其他"],
["香港","其他"],
["澳门","其他"],
["台湾","其他"]
];var provinces=
[
["陕西省"],
["广东省"],
["上海市"],
["北京市"],
["天津市"],
["河北省"],
["山西省"],
["内蒙古"],
["辽宁省"],
["吉林省"],
["黑龙江省"],
[" 江苏省"],
["浙江省"],
["安徽省"],
["福建省"],
["江西省"],
["山东省"],
["河南省"],
["湖北省"],
["湖南省"],
["广西自治区"],
["海南省"],
["重庆市"],
["四川省"],
["贵州省"],
["云南省"],
["西藏自治区"],
["甘肃省"],
["青海省"],
["宁夏回族自治区"],
["新疆维吾尔自治区"],
["香港特别行政区"],
["澳门特别行政区"],
["台湾省"],
["其它"]
];
function getCity()
{
  var sltProvince=document.getElementById("province");
  var sltCity=document.getElementById("city");
  sltCity.options.length=1;
  if(sltProvince.selectedIndex>0)
  {
    var provinceCity=citys[sltProvince.selectedIndex-1];
    for(var i=0; i<provinceCity.length; i++)
    {
      var city=new Option(provinceCity[i],i);
      sltCity.options.add(city);
    }
  }
}
function getpProvince()
{
    var sltProvince=document.getElementById("province");
    for(var i=0; i<provinces.length; i++)
    {
      var Province=new Option(provinces[i],i);
      sltProvince.options.add(Province);
    }
}
function sss()
{
alert(document.getElementById("province").options[document.getElementById("province").selectedIndex].text+document.getElementById("city").options[document.getElementById("city").selectedIndex].text);
}
</script>
<body onload="getpProvince();">
<select name="province" id="province" onchange="getCity();" >
  <option value="0">请选择省份</option>
</select>
<select name="city" id="city" onchange="sss();">
  <option value="0">请选择城市</option>
</select>
</body>
</html>
最新省市县/区三级联动代码共3个http://download.csdn.net/source/1072168
带数据库的联动用户控件连接数据库并读取表中的记录<%@ Control Language="C#" CodeFile="DropControl.ascx.cs" Inherits="UserContral_DropControl" AutoEventWireup="false"  TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Import namespace="System.Data" %>
<%@ Import namespace="System.Data.OleDb" %>
<%
Response.Write("<script language=javascript>");
Response.Write("var aryDq = new Array(");
  DAL.OleDBO db = new DAL.OleDBO();
  string strSql = "select * from Ctinfo where pramentid<>0";
  DataSet ds = new DataSet();
  ds = db.GetDataSet(strSql);
  int itbRowCount = ds.Tables[0].Rows.Count;
  foreach(DataRow row in ds.Tables[0].Rows)
  {
   Response.Write("new Array('" + row[0].ToString() + "','" + row[1].ToString() + "','" + row[2].ToString() + "'),");
  }
  Response.Write("new Array('0','0','0')");
  ds.Dispose();
  ds = null;
  Response.Write(");");
Response.Write("</script>");
%>
<script language="javascript" type="text/javascript">
function Sfonchange(sfId)
{
  if (sfId!="")
  {
   var Dqstr="";j=0,p=0;
   for (i=0;i<aryDq.length;i++)
   {
    if (aryDq[i][2]==sfId)
    {
     j=j+1;
     Dqstr=Dqstr+aryDq[i][0]+","+aryDq[i][1]+",";
    }
   }
   document.getElementById("dropDq").length=j+1;
   aryDq1=Dqstr.split(",");
   document.getElementById("dropDq").options[0].value = "0";
   document.getElementById("dropDq").options[0].text = "请选择所在城市";
   for (i=1;i<=j;i++)
   {
    if(aryDq1[p] != null && aryDq1[p] != "")
    {
     document.getElementById("dropDq").options[i].value = aryDq1[p];
     document.getElementById("dropDq").options[i].text = aryDq1[p+1];
    }
    p=p+2;
   }
  }
}
</script>前端调用<%@ Register Src="UserContral/DropControl.ascx" TagName="DropControl" TagPrefix="uc1" %><!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 runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
      function a()
      {
        document.getElementById("ss").innerText=document.getElementById("dropDq").options[document.getElementById("dropDq").selectedIndex].text;
        return false;
       }
    </script>
</head>
<body>
    <form id="form1" runat="server" method="post">
    <div>
        <uc1:DropControl ID="DropControl1" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        <asp:DropDownList ID="dropDq" runat="server">
            <asp:ListItem Value="0">请选择所在城市</asp:ListItem>
        </asp:DropDownList>
        <asp:HiddenField ID="ss" runat="server" />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" OnClientClick="a();" /></div>
    </form>
</body>
</html>
哇  这么强  17楼 xml 最牛啦  厉害   好东西就该共享哈哈
AJAX........
学xml一直不知道干嘛用，呵呵~现在觉得很好的哦！
不不不,这种东西,不要使用数据库,不必要使用Ajax ,纯JS完全可以搞定(单独独立出来),而且可维护性强!
我当时做这题时(学校的试题,自己有改进),使用二维数组,那么以后如果维护的话,直接添加新的组数元素就可以了!
具体的,以后整理一下,放上来!--不过楼主,这东西确实应该是算法成熟了,自己可以先搜一下!而且怎么感觉你也是在做作业?
在javascript里定义的事件函数是:onSelectChange;---使用Dreamwear CS4 自动弹出来!
--方法要传递省份名称!!!
package com.alldao.bims.web.country;import java.io.PrintWriter;
import java.util.List;import com.alldao.bims.global.web.BaseAction;
import com.alldao.bims.modules.manage.country.domain.City;
import com.alldao.bims.modules.manage.country.domain.Province;
import com.alldao.bims.modules.manage.country.domain.Xian;
/**
* Ajax调用！级联菜单操作！
* @author wdw
*
*/
public class CountryAction extends BaseAction { /**
*
*/
private static final long serialVersionUID = -6513709007483326727L; private int globalId; public int getGlobalId() {
return globalId;
}
public void setGlobalId(int globalId) {
this.globalId = globalId;
} public void getProvince() throws Exception {
List<Province> provinceList=super.getService().getCountryService().getAllProvinceByCountryId(globalId);
String str="";
for(int i=0;i<provinceList.size();i++){
String pname=provinceList.get(i).getSprovinceCnName();
int pid = provinceList.get(i).getIProvinceID();
if(i==0){
str+=pid;
str+=",";
str+=pname;
}else{
str+="*";
str+=pid;
str+=",";
str+=pname;
}
}
getResponse().setContentType("text/xml; charset=utf-8");
PrintWriter writer =getResponse().getWriter();
writer.print(str); }
public void getCity() throws Exception {
List<City> cityList=super.getService().getCountryService().getAllCityByProvinceId(globalId);
String str="";
for(int i=0;i<cityList.size();i++){
String pname=cityList.get(i).getSCityCnName();
int pid = cityList.get(i).getICityID();
if(i==0){
str+=pid;
str+=",";
str+=pname;
}else{
str+="*";
str+=pid;
str+=",";
str+=pname;
}
}
getResponse().setContentType("text/xml; charset=utf-8");
PrintWriter writer =getResponse().getWriter();
writer.print(str); }
public void getXian() throws Exception {
List<Xian> xianList=super.getService().getCountryService().getAllXianByCityId(globalId);
String str="";
for(int i=0;i<xianList.size();i++){
String pname=xianList.get(i).getSXianCnName();
int pid = xianList.get(i).getIXianId();
if(i==0){
str+=pid;
str+=",";
str+=pname;
}else{
str+="*";
str+=pid;
str+=",";
str+=pname;
}
}
getResponse().setContentType("text/xml; charset=utf-8");
PrintWriter writer =getResponse().getWriter();
writer.print(str); }}
var myAjax=new Ajax.Request(url,{
    method:"get",
    parameters:{globalId:e,d:new Date().getTime()},
    onComplete:
    function(o)
    {
var result=o.responseText;
var provinces=result.split("*");
var province=document.getElementById(t3);
province.options.length=0;
var opt=document.createElement("option");
opt.value="";
opt.innerHTML="--请选择--";
province.appendChild(opt);
for(var i=0;i<provinces.length;i++)
{
    var arry=provinces[i].split(",");
var pid=arry[0];
var name=arry[1]; var op=document.createElement("option");
op.value=pid;
op.innerHTML=name;
province.appendChild(op);
}
      }
    });
我最近刚好也做了一个这个东西，最简单的方式是放xml文件里面，放数据库也差不了多少。
每次点击的时候，触发事件，我用的是DropListBox控件。动态增加删除它的item，绑定值到item的value和text上。
非常方便，就几行。你这样搞，不麻烦啊？
建议写xml+js
不要放数据库，不要从数据库取值