省市二级联动基础数据

/*
 * @Param z:String  select标签的data-province属性值
 * @Param c:String  select标签的 data-city属性值
 * */
window.onload=function(){
(function(z, c) {
    var clist = {
        p: ["请选择", "北京", "上海", "天津", "重庆", "山东", "河南", "湖北", "湖南", "广东", "河北", "山西", "辽宁", "吉林", "内蒙古", "黑龙江", "江苏", "浙江", "安微", "福建", "江西", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "广西", "西藏", "宁夏", "新疆", "海南", "香港", "澳门", "台湾"],
        c: [[],
            ["", "东城", "西城", "海淀", "朝阳", "丰台", "石景山", "通州", "顺义", "房山", "大兴", "昌平", "怀柔", "平谷", "门头沟", "密云", "延庆"],
            ["", "黄浦", "浦东", "徐汇", "长宁", "静安", "普陀", "闸北", "虹口", "杨浦", "闵行", "宝山", "嘉定", "金山", "松江", "青浦", "奉贤", "崇明"],
            ["", "和平", "河西", "南开", "河东", "河北", "红桥", "东丽", "津南", "西青", "北辰", "滨海新区"],
            ["", "万州", "黔江", "涪陵", "渝中", "大渡口", "江北", "沙坪坝", "九龙陂", "南岸", "北碚", "渝北", "巴南", "长区", "江津", "合川", "永川", "南川", "綦江", "大足", "铜梁"],
            ["", "济南", "青岛", "淄博", "枣庄", "东营", "烟台", "潍坊", "济宁", "泰安", "威海", "日照", "滨州", "德州", "聊城", "临沂", "菏泽", "莱芜"],
            ["", "郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "商丘", "周口", "驻马店", "南阳", "信阳", "济源"],
            ["", "武汉", "黄石", "十堰", "荆州", "宜昌", "襄阳", "鄂州", "荆门", "黄冈", "孝感", "咸宁", "仙桃", "潜江", "恩施", "神农架", "天门", "随州"],
            ["", "长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "娄底", "郴州", "永州", "怀化", "湘西"],
            ["", "广州", "深圳", "珠海", "汕头", "佛山", "东莞", "中山", "潮州", "惠州", "湛江", "肇庆", "江门", "茂名", "韶关", "揭阳", "云浮", "梅州", "汕尾", "河源", "阳江", "清远"],
            ["", "石家庄", "保定", "沧州", "衡水", "邢台", "邯郸", "张家口", "廊坊", "唐山", "秦皇岛", "承德"],
            ["", "太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],
            ["", "沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],
            ["", "长春", "吉林", "四平", "辽源", "通化", "白山", "白城", "松原", "延边", "长白山", "梅河口", "公主岭"],
            ["", "呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "兴安盟", "锡林郭勒", "阿拉善"],
            ["", "哈尔滨", "齐齐哈尔", "鸡西", "鹤岗", "双鸭山", "大庆", "伊春", "佳木斯", "七台河", "牡丹江", "黑河", "绥化", "大兴安岭"],
            ["", "南京", "无锡", "徐州", "常州", "苏州", "南通", "连云港", "淮安", "盐城", "扬州", "镇江", "秦州", "宿州"],
            ["", "杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州", "舟山", "台州", "丽水"],
            ["", "合肥", "芜湖", "蚌埠", "马鞍山", "宿州", "安庆", "淮南", "铜陵", "黄山", "宣城", "池州", "滁州", "淮北", "阜阳", "六安", "毫州"],
            ["", "福州", "厦门", "漳州", "泉州", "三明", "莆田", "南平", "龙岩", "宁德", "平潭"],
            ["", "南昌", "九江", "上饶", "抚州", "宜春", "吉安", "赣州", "景德镇", "萍乡", "新余", "鹰潭"],
            ["", "成都", "绵阳", "自贡", "攀枝花", "泸州", "德阳", "广元", "遂宁", "内江", "乐山", "资阳", "宜宾", "南充", "达州", "雅安", "阿坝", "甘孜", "凉山", "广安", "巴中", "眉山"],
            ["", "贵阳", "六盘水", "遵义", "铜仁", "黔西", "毕节", "安顺", "黔东", "黔南"],
            ["", "昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],
            ["", "西安", "宝鸡", "咸阳", "渭南", "铜川", "治中", "安康", "商洛", "榆林", "延安", "汉中", "杨陵"],
            ["", "兰州", "嘉峪关", "金昌", "白银", "天水", "酒泉", "张掖", "武威", "定西", "陇南", "平凉", "庆阳", "临夏", "甘南"],
            ["", "西宁", "海东", "海北", "黄南", "海南", "果洛", "玉树", "海西"],
            ["", "南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"],
            ["", "拉萨", "昌都", "日喀则", "山南", "那曲", "阿里", "林芝"], ["", "银川", "石嘴山", "吴忠市", "固原市", "中卫"],
            ["", "乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "昌吉", "博尔塔", "巴音郭楞", "阿克苏", "克孜勒苏柯尔克", "喀什", "和田", "伊犁", "塔城", "阿勒泰", "石河子", "阿拉尔", "图木舒克", "五家渠", "北屯", "铁门关", "双河市"],
            ["", "海口", "三亚", "三沙"],
            ["", "中西区", "湾仔区", "东区", "南区", "油尖旺", "深水埗", "九龙城", "黄大仙", "观塘", "葵青", "荃湾", "屯门", "元朗", "北区", "大埔", "沙田", "西贡", "离岛"],
            ["", "花地玛堂", "圣安多尼堂", "大堂", "望德堂", "风顺堂", "嘉模堂", "圣方济各堂"], ["", "台北", "新北", "桃园", "台中", "台南", "高雄", "基隆", "新竹", "嘉义"]
        ]
    };
    var all = document.body.getElementsByTagName("select");
    var ps, cs, j;
    for (j = 0; j < all.length; j++) {
        if (getAttr(all[j], "data-province") === z) {
            ps = all[j]
        }
        if (getAttr(all[j], "data-city") === c) {
            cs = all[j]
        }
    }
    function getAttr(obj, attr) {
        return obj.getAttribute(attr)
    }
    pL = clist.p.length,
    i = 0;
    for (i = 0; i < pL; i++) {
        var province = document.createElement("option");
        province.value = clist.p[i];
        province.innerHTML = clist.p[i];
        ps.appendChild(province)
    }
    ps.onfocus = function() {
        cs.innerHTML = ""
    };
    ps.onblur = function() {
        var n = ps.selectedIndex,
        s = 0;
        for (s = 0; s < clist.c[n].length; s++) {
            var city = document.createElement("option");
            city.value = clist.c[n][s];
            city.innerHTML = clist.c[n][s];
            cs.appendChild(city)
        }
    }
})("province", "city");}
/*        <select name="" data-province="province"></select>
        <select name="" data-city="city"></select>*/
时间: 2024-10-14 00:52:42

省市二级联动基础数据的相关文章

省市二级联动--使用app-jquery-cityselect.js插件

只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label> <p>从:</p> <div class="input-group"> <input id="areaIdFrom" name="areaIdFrom" type="hidden"

jsp+ajax+serverlet实现省市二级联动

jsp界面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

(转)JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动

JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动 原文链接:http://heisetoufa.iteye.com/blog/353974 比较好的二级联动: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE>

JavaScript实现省市二级联动

    JavaScript实现省市二级联动 展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市 实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. 将相应的数据赋值给对应的option控件 方法的讲解 Function()函数 onchange();改变事件 笔者在这里写了一个关于河南与河北的简单联动   省市联动 <body> <select id="province"></select>省 &l

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

JS实现省市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF

JavaScript省市二级联动

cities.xml <?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通

js省市二级联动实例

//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><select id="province" onchange="func1(this)"> </sele

jQuery_完成省市二级联动

当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: 代码如下: <!DOCTYPE html> <html> <head> <script typr="text/javascript" src="js/jquery-1.8.3.js"></script> <