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

<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里定义事件函数.怎么才能让省份和城市产生连动,选择省份就会有相应的城市对应在里面,求高手解答下

135 个解决方案

#1

我有个例子，把我的数据改下就可以了

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

#2

我强烈建议用ajax！你这样写自己最后维护是个问题！

#3

我说的是按1楼的写，维护是个问题不是我的！
你可以用jquery，或者原始方法写个，很简单的！

#4

<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]));即可

#5

引用 2 楼 yingkeda 的回复:

这些东西太多了，是不应该写死

#6

答案很多，LZ都不错

#7

引用 2 楼 yingkeda 的回复:

对不要写死了，应该从数据库中去查出来

#8

引用 2 楼 yingkeda 的回复:

赞同！

#9

建议用ajax

#10

引用 4 楼 lihui_shine 的回复:

可以在数据库设定city值,然后直接在页面上从数据库读出来吗,就像在数据库里存东城区为101,西城区102,然后areaList里就写"v100":[["选择城区"],["101"],["102"]] 这样可以吗?

#11

该回复于2009-07-18 00:13:56被版主删除

#12

访问数据库太麻烦吧，省市级联用js就行了

#13

引用 10 楼 liumang19882 的回复:

可以的..具体实现其实网上有很多代码的..

#14

好东西哦。。谢谢

#15

引用 2 楼 yingkeda 的回复:

没必要，增加后台麻烦。写个数组专门存在一个js中即可。这个Js可以用其他语言通过数据库一次性生成。
毕竟省市数据不会经常变动的。除非数组实在特别大或者需要经常维护。

#16

我用的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>

#17

页面JS

var 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>

#18

http://topic.csdn.net/u/20090524/20/51f004fc-4a45-4582-88f2-644152646184.html
over

#19

还是XML好～谢谢，我的想法就是要用XML语言写

#20

赞同

#21

呵呵，标记下，居然有这么多资料

#22

xml文件太牛了，什么都能做，可是我不会用啊，恳请推荐几本xml快速速成的书

#23

lz的省、市在数据库中都有对应的ID值，估计在数据库中也是保存的关联信息
建议还是用ajax实时地去调比较好
当然，也可以放在其他地方，比如js变量中，xml文件中
但是一旦发生变动，维护起来也是一件麻烦的事

#24

都是只保存在一张表里同一字段的,唯一区别的就是ID,在数据库里无关联,必须在页面上写方法才可以.大家帮下我

#25

<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是唯一的怎么在数据库没关联呢！

#26

1楼的朋友真辛苦。。。

#27

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

#28

牛

#29

10 分可用

#30

现在主要用Jquery，不在使用最原始的脚本了，要跟上时代哦。。

#31

楼主，您可以从网上找一下:"无刷新三级联动"，就会找到很多你想的效果的实现了。这种技术已经很成熟了。

#32

其实用DWR实现起来蛮简单

#33

#34

mark!

#35

我以前曾经用类似27楼的代码写过，去试试看。

#36

17楼的方法可以，这种二级联动，就是要做ajax+xml来做，代码少，还容易维护，我做过很多这种效果，楼主还有不明白的可以问我，其实这种效果应该有很多例子的

#37

我好像有个这个数据库，

#38

看不懂楼主写清楚点嘛

#39

可以在数据库里面写入，这样维护起来更好

#40

引用 2 楼 yingkeda 的回复:

div一块区域，直接拼成一个select标签

#41

数据库,和,ajax我都有,要不

#42

建议用ajax!

#43

建议用数据库去处理！！！

#44

我这里有个父子业务关联表：
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>

#45

ding

#46

引用 1 楼 qiheia 的回复:

哈哈,够强大的,写一个脚本吧,以后多地方可疑用用

#47

试试用XML吧

#48

......

#49

学习了

#50

学习了

#1

#2

我强烈建议用ajax！你这样写自己最后维护是个问题！

#3

我说的是按1楼的写，维护是个问题不是我的！
你可以用jquery，或者原始方法写个，很简单的！

#4

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

#5

引用 2 楼 yingkeda 的回复:

这些东西太多了，是不应该写死

#6

答案很多，LZ都不错

#7

引用 2 楼 yingkeda 的回复:

对不要写死了，应该从数据库中去查出来

#8

引用 2 楼 yingkeda 的回复:

赞同！

#9

建议用ajax

#10

引用 4 楼 lihui_shine 的回复:

#11

该回复于2009-07-18 00:13:56被版主删除

#12

访问数据库太麻烦吧，省市级联用js就行了

#13

引用 10 楼 liumang19882 的回复:

可以的..具体实现其实网上有很多代码的..

#14

好东西哦。。谢谢

#15

引用 2 楼 yingkeda 的回复:

#16

我用的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>

#17

页面JS

var 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>

#18

http://topic.csdn.net/u/20090524/20/51f004fc-4a45-4582-88f2-644152646184.html
over

#19

还是XML好～谢谢，我的想法就是要用XML语言写

#20

赞同

#21

呵呵，标记下，居然有这么多资料

#22

xml文件太牛了，什么都能做，可是我不会用啊，恳请推荐几本xml快速速成的书

#23

#24

都是只保存在一张表里同一字段的,唯一区别的就是ID,在数据库里无关联,必须在页面上写方法才可以.大家帮下我

#25

#26

1楼的朋友真辛苦。。。

#27

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

#28

牛

#29

10 分可用

#30

现在主要用Jquery，不在使用最原始的脚本了，要跟上时代哦。。

#31

楼主，您可以从网上找一下:"无刷新三级联动"，就会找到很多你想的效果的实现了。这种技术已经很成熟了。

#32

其实用DWR实现起来蛮简单

#33

#34

mark!

#35

我以前曾经用类似27楼的代码写过，去试试看。

#36

#37

我好像有个这个数据库，

#38

看不懂楼主写清楚点嘛

#39

可以在数据库里面写入，这样维护起来更好

#40

引用 2 楼 yingkeda 的回复:

div一块区域，直接拼成一个select标签

#41

数据库,和,ajax我都有,要不

#42

建议用ajax!

#43

建议用数据库去处理！！！

#44

#45

ding

#46

引用 1 楼 qiheia 的回复:

哈哈,够强大的,写一个脚本吧,以后多地方可疑用用

#47

试试用XML吧

#48

......

#49

学习了

#50

学习了