说实话这方面的文章在网上很多,不过我下载了几个看了一下代码,发现都是出自一个人的手笔,而且那个联动很不好用,所以呢我就按照自己的想法再次写了一下这东西,分享给大家!欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT LANGUAGE="JavaScript">
<!--
function cn(){
    this.Items = {};
}
cn.prototype.add = function(id,iArray){
    this.Items[id] = iArray;
}
cn.prototype.Exi = function(id){
    if(typeof(this.Items[id]) == "undefined"){return false;}
    return true;
}

function chg(v){
    if(v==3){return;}
    var str="0";
    for(i=0;i<v;i++){str+=("_"+(document.getElementById(s[i]).selectedIndex))};

var ss=document.getElementById(s[v]);
    with(ss){
        length = 0;    //清理掉option
        if(a_t.Exi(str)){
            ar=a_t.Items[str];
            for(i=0;i<ar.length;i++){
                options[length]=new Option(ar[i],ar[i]);
                if(ar[i]==o[v]){options[i].selected=true;}//如果列表内包含初始项目则默认选中
            }
        }
        if(++v<s.length){chg(v);}
    }
}

var s=["tid1","tid2","tid3"];
var o=["台湾","桃园","八德市"];//迎欢转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home

function setup(){
    for(i=1;i<=3;i++){
        document.getElementById(s[(i-1)]).οnchange=new Function("chg("+(i)+")");
    }
    chg(0);
}

var a_t = new cn();

a_t.add("0",["中国","韩国","台湾"]);

a_t.add("0_0",["安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西"]);
a_t.add("0_0_0",["安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州"]);
a_t.add("0_0_1",["北京"]);
a_t.add("0_0_2",["福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"]);
a_t.add("0_0_3",["白银","定西","甘南藏族自治州","嘉峪关","金昌","酒泉","兰州","临夏回族自治州","陇南","平凉","庆阳","天水","武威","张掖"]);
a_t.add("0_0_4",["潮州","东莞","佛山","广州","河源","深圳","阳江","云浮","湛江","肇庆","中山","珠海"]);
a_t.add("0_0_5",["百色","北海","崇左","防城港","桂林","贵港","河池","贺州","来宾","柳州","南宁","钦州","梧州","玉林"]);
a_t.add("0_0_6",["安顺","毕节","贵阳","六盘水","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","铜仁","遵义"]);
a_t.add("0_0_7",["澄迈县","定安县","东方","海口",,"琼中黎族苗族自治县","三亚","屯昌县","万宁","文昌","五指山","儋州"]);
a_t.add("0_0_8",["保定","沧州","承德","邯郸","衡水","廊坊","秦皇岛","石家庄","唐山","邢台","张家口"]);
a_t.add("0_0_9",["安阳","鹤壁","济源","焦作","开封","洛阳","南阳","平顶山","三门峡","商丘","新乡","信阳","许昌","郑州","周口","驻马店","漯河","濮阳"]);
a_t.add("0_0_10",["大庆","大兴安岭","哈尔滨","鹤岗","黑河","鸡西","佳木斯","牡丹江","七台河","齐齐哈尔","双鸭山","绥化","伊春"]);
a_t.add("0_0_11",["鄂州","恩施土家族苗族自治州","黄冈","黄石","荆门","荆州","潜江","神农架林区","十堰","随州","天门","武汉","仙桃","咸宁","襄樊","孝感","宜昌"]);
a_t.add("0_0_12",["常德","长沙","郴州","衡阳","怀化","娄底","邵阳","湘潭","湘西土家族苗族自治州","益阳","永州","岳阳","张家界","株洲"]);
a_t.add("0_0_13",["白城","白山","长春","吉林","辽源","四平","松原","通化","延边朝鲜族自治州"]);
a_t.add("0_0_14",["常州","淮安","连云港","南京","南通","苏州","宿迁","泰州","无锡","徐州","盐城","扬州","镇江"]);
a_t.add("0_0_15",["抚州","赣州","吉安","景德镇","九江","南昌","萍乡","上饶","新余","宜春","鹰潭"]);
a_t.add("0_0_16",["鞍山","本溪","朝阳","大连","丹东","抚顺","阜新","葫芦岛","锦州","辽阳","盘锦","沈阳","铁岭","营口"]);
a_t.add("0_0_17",["阿拉善盟","巴彦淖尔盟","包头","赤峰","鄂尔多斯","呼和浩特","呼伦贝尔","通辽","乌海","乌兰察布盟","锡林郭勒盟","兴安盟"]);
a_t.add("0_0_18",["固原","石嘴山","吴忠","银川"]);
a_t.add("0_0_19",["果洛藏族自治州","海北藏族自治州","海东","海南藏族自治州","海西蒙古族藏族自治州","黄南藏族自治州","西宁","玉树藏族自治州"]);
a_t.add("0_0_20",["滨州","德州","东营","菏泽","济南","济宁","莱芜","聊城","临沂","青岛","日照","泰安","威海","潍坊","烟台","枣庄","淄博"]);

a_t.add("0_1",["汉城特別市","釜山广域市","大邱广域市","济州道"]);
a_t.add("0_1_0",["汉城"]);
a_t.add("0_1_1",["釜山","机张郡"]);
a_t.add("0_1_2",["大邱","达城郡"]);
a_t.add("0_1_3",["仁川","江华郡","瓮津郡"]);
a_t.add("0_1_4",["光州"]);
a_t.add("0_1_5",["大田"]);
a_t.add("0_1_6",["蔚山","蔚州郡"]);
a_t.add("0_1_7",["水原市","城南市","安山市","高阳市","安养市","富川市"]);
a_t.add("0_1_8",["春川市","原州市","江陵市"]);
a_t.add("0_1_9",["清州市"]);
a_t.add("0_1_10",["天安市"]);
a_t.add("0_1_11",["全州市","群山市","益山市"]);
a_t.add("0_1_12",["木浦市","丽水市","顺天市"]);
a_t.add("0_1_13",["浦项市","龟尾市","庆州市"]);
a_t.add("0_1_14",["昌原市","马山市","晋州市"]);
a_t.add("0_1_15",["济州市","西归浦市","北济州郡","南济州郡"]);

a_t.add("0_2",["基隆","台北","桃园","新竹","苗栗","台中","彰化","南投","云林","嘉义","台南","高雄","台东","花莲"]);
a_t.add("0_2_0",["基隆"]);
a_t.add("0_2_1",["台北"]);
a_t.add("0_2_2",["中壢市","平鎮市","龍潭鄉","楊梅鎮","新屋鄉","觀音鄉","龜山鄉","八德市","大溪鎮","復興鄉","大園鄉","蘆竹鄉"]);
a_t.add("0_2_3",["名古屋市 "]);
a_t.add("0_2_4",["札幌市"]);
a_t.add("0_2_5",["神戸市"]);
a_t.add("0_2_6",["京都市"]);
a_t.add("0_2_7",["福冈市"]);
a_t.add("0_2_8",["川崎市"]);
a_t.add("0_2_9",["埼玉市"]);
a_t.add("0_2_10",["广岛市"]);
a_t.add("0_2_11",["仙台市"]);
a_t.add("0_2_12",["北九州市 "]);
a_t.add("0_2_13",["千叶市"]);

//-->
</SCRIPT>
</head>
<body onLoad="setup()">
<form method='post' action='@.php'>
    <select id="tid1" name="tid1"></select>
    <select id="tid2" name="tid2"></select>
    <select id="tid3" name="tid3"></select>

<input type='submit' value='submit'>
</form>

转载于:https://www.cnblogs.com/see7di/archive/2011/09/01/2239659.html

Js做的城市三级联动,原创相关推荐

  1. Js做的城市三级联动

    这个是经常用到的,和大家分享一下 -- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  3. 城市三级联动功能实现

    背景: 最近在进行商品购买流程的开发,需要用户填写自己的收货地址,为了保证地址的准确性,需要使用到全国城市的三级联动功能 其中可以有三个思路: 1.使用 js 直接加载城市信息: 2.自己建立数据库, ...

  4. 【web前端性能优化】13.城市三级联动

    最近做项目遇到一个城市三级联动的前端问题,感觉一个城市三级联动如果引入一个jquery库,有点太重了,于是就在网上找到了原始的js写法,感觉还挺好用的就记录一下,如下图所示: pay.html < ...

  5. 收货地址的JavaScript城市三级联动【干货拿走不谢!>_<】

    城市三级联动 在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...

  6. js原生,省市区三级联动插件

    js原生,省市区三级联动插件 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  7. 城市三级联动数据及地区代码对照表

    城市三级联动数据 介绍 使用说明 数据说明 做前端需要城市选择,在网上找到了别人的数据,但是没台湾省.作为爱国中年码农,婶可忍叔不可忍.所以就查阅了[中华人民共和国民政部]的网站,根据最新行程区划生成 ...

  8. 省市县联动列表html代码,html+js 全国 省市县三级联动

    [实例简介] [实例截图] [核心代码] 全国各省市js三级联动 body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅 ...

  9. 台湾、香港、澳门的城市三级联动json

    台湾.香港.澳门的城市三级联动json =========== 台湾 ============ {"citys": [{"areas": [{"are ...

最新文章

  1. 什么是存储过程?什么是触发器?SQL中存储过程与触发器的区别是什么?
  2. 经典的JavaScript入门书
  3. 流程的python-《流畅的 Python》到底好在哪?
  4. 如何重开固定资产会计年度
  5. Homepage Machine Learning Algorithm 浅谈深度学习中的激活函数 - The Activation Function in Deep Learning
  6. 2020 华工 数据结构-平时作业_【激光】从上海工博会看华工激光的差异化路线...
  7. 前端学习(999):类操作和classname区别
  8. 【转】在无人值守程序(服务)中调用Microsoft Graph
  9. 国开大学计算机应用基础作业二,国家开放大学《计算机应用基础》形考作业二答案解析 (2)...
  10. 何为量子计算机? | CSDN 博文精选
  11. 什么?你还不知道Web Animations API
  12. 华为主题包hwt下载_华为EMUI系统主题文件hwt修改及制作详细教程
  13. python google 搜索结果爬取_对于 Python 抓取 Google 搜索结果的一些了解
  14. 2011年国外最受欢迎的15个电影网站
  15. h5做app和原生app有什么区别?
  16. 成都榆熙电子商务有限公司:旗舰店都有哪些优势?
  17. windows10 家庭版 “当前账户已锁定“的解决方式
  18. 二十九 我在软件园的那些日子里
  19. 【Java学习笔记】工厂模式
  20. Java 的设计模式

热门文章

  1. 被吐槽我该保持怎样的心态 | 趣闻探讨 |
  2. 【2022-08-27】美团秋招笔试前四道编程题
  3. 删除U盘中的System Volume Information 文件夹的方法
  4. 碰到了version `GLIBC_2.27' not found错误
  5. 番茄酱的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  6. 本季度干货导航 | 2022年Q2
  7. 巧用美女照做微信吸粉,你会做吗?
  8. Content Type
  9. c语言省二机考和笔试,计算机二级都是上午考试吗
  10. 程序员一年多少行_中国人寿的百万如意行意外保险核保规则怎么样?百万如意行意外险有哪些坑?一年佣金多少钱值得买吗?...