所以索性就把几种城市选择的方式实现一遍,用三个中继器分别存放省份、城市、区域数据

原标题:Axure教程:省市县三级联合浮动选取(全国省市区数量)

图片 1

省市县三级联合浮动选用功用在互连网平台运用极其不以为奇,相当多人在做成品设计时,不清楚怎么落到实处三级联合浮动效率,恐怕只可以轻松实现生龙活虎三个稳固城市的三级联合浮动功效。要是要促成全国都会的三级联动采用啊?小编将通过那篇案列分享,教我们使用Axure制作完毕“全国都会省市县三级联合浮动选择效果”。

wo e le

图片 2

初藳地址→看过来

福寿无疆效果与利益

写在前头

目前写一个有关天气的东西,里面包车型客车省市区(县)城市政委员会公投择让自个儿很咳嗽,在英特网找寻出来大都以依靠插件或然第三方库,以为那样做代码会比较重,所以干脆就把二种城市政委员会公投择的秘诀完成一遍,以备日后的常常之需。这三种方式都以指向pc端的,并且都以利用原生js实现的,连jq都没动用,于是代码有一些繁杂额(窘迫)。。。。可是还是让本人把原理说完呢。

源代码地址→传送门

预览地址→传送门

图片 3

方式大器晚成:下拉精选框达成省市区(县)三级联合浮动

  1. 用下拉框达成省市区三级联合浮动是很广阔的风流倜傥种方法,也很有益于。这里供给先通晓下select的连带属性及其对象属性,请参见此文
  2. 先看下最后兑现效果与利益图:
![](https://upload-images.jianshu.io/upload_images/1727565-863eb127228f4422.png)

select实现三级联动
  1. 思路介绍:
    • 页面加载时,动态获取省份列表并内置下拉菜单的下拉项中:
    ![](https://upload-images.jianshu.io/upload_images/1727565-d20a1f34b08cca6a.png)

    select-省份显示
    /*自动加载省份列表*/
(function showProv() {
    btn.disabled = true;
    var len = provice.length;
    for (var i = 0; i < len; i++) {
        var provOpt = document.createElement('option');
        provOpt.innerText = provice[i]['name'];
        provOpt.value = i;
        prov.appendChild(provOpt);
    }
})();
    var val = obj.options[obj.selectedIndex].value;  //这里得到的是所选择省份在所有下拉项中为第几项
![](https://upload-images.jianshu.io/upload_images/1727565-80b16f0ad84557a1.png)

select-省份显示
    <!--方法是判断县区的length是否为0-->
    var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
        if(countryLen == 0){
            addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
            return;
        }
  1. 注意:
    • 在未选中实际县区时,开关为不可点状态
    • 切切实实的完毕首要依照城市数量来进展越来越细的管理。
  2. 说明:
    • 此处运用的省市区数量来源于互连网,不可能作保真实性及完整性,仅供案例使用
    • 此间使用的数据类型为js数组,格式参照他事他说加以考查如下(完整版):
var provice = [
    {
        name: "北京市",
        city: [
            {
                name: "北京市",
                districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
            }
        ]
    },

    ......

    {
        name: "河北省",
        city: [
            {
                name: "石家庄市",
                districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]
            },

            .......

            {
                name: "邯郸市",
                districtAndCounty: ["丛台区", "邯山区", "复兴区", "峰峰矿区", "武安市", "邯郸县", "南堡乡东小屯村", "临漳县", "临漳镇", "成安县", "成安镇", "大名县", "大名镇", "涉县", "涉城镇", "磁县", "磁州镇", "肥乡县", "肥乡镇", "永年县", "临洺关镇", "邱县", "新马头镇", "鸡泽县", "鸡泽镇", "广平县", "广平镇", "馆陶县", "馆陶镇", "魏县", "魏城镇", "曲周县", "曲周镇"]
            }
        ]
    }
]
  1. 能够自由接受全国全体省区、选用本省份对应的都市、选拔该城市相应的县区;
  2. 未选取省份时,点击“城市下拉采摘”,提醒“请先选取省份”;
  3. 未采纳城市时,点击“县区下拉选拔”,提醒“请先采取城市”;
  4. 切换选中省份时,重新设置城市及县区选项;
  5. 切换选中城市时,重新初始化县区选项
  6. 当下甄选处于下拉框选项情形时,点击任何选用框,隐敝当前选拔下拉框;
  7. 下拉选项框显示时,下拉箭头向上,下拉选项框隐瞒时,下拉箭头向上;
  8. 动态突显三级行政区移入状态、选中状态、取消选中状态。

方法二:按级选中省市县/区

  1. 这种办法比上边包车型地铁下拉框越来越美观点,操作也更方便点,可是差不离的逻辑有一点形似。所用省市区数量跟上边包车型地铁相仿。
  2. 先看看这种措施的职能图:
![](https://upload-images.jianshu.io/upload_images/1727565-cee210bde884f49a.png)

按级选中省市县/区
  1. 在页面加载时同样先出示出装有的省份列表(方法相仿)
![](https://upload-images.jianshu.io/upload_images/1727565-aaf996c6ba2aad3e.png)

按级选中省市县/区
  1. 点击具体省份时,将省份列表替换来对应的城市列表,点击具体城市时显得对清徐县区,完结如下:
addrWrap.onclick = function (e) {     //将点击事件委托给列表的父元素
    var n;
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target && target.nodeName == 'LI') {
        /*先判断当前显示区域显示的是省市区的那部分*/
        for (var z = 0; z < 3; z++) {
            if (titleWrap[z].className == 'titleSel')
                n = z;
        }
        /*显示的处理函数*/
        switch (n) {
            case 0:
                showCity2(target.index);   //点击的是省份中列表的某一项,接下来则显示城市列表
                break;
            case 1:
                showCountry2(target.index);  //点击的是城市列表中的某一项,接下来则显示县区列表
                break;
            case 2:
                selectCountry(target.index);  //点击具体的某个县区,则将该县区选择
                break;
            default:
                showProv2();
        }
    }
};

图片 5

按级选中省市县/区

图片 6

按级选中省市县/区

  1. 地点点击的每一步军长选中项的目录及值保存在贰个对象中,以便最后点击分明开关将精选的省市区出示在输入框中。
  2. 当接收的城阙不设有县区时管理跟第大器晚成种方法相符。
  3. 当点击分类时,展现相应的原委,同临时候将保存的靶子的值进行处理:
![](https://upload-images.jianshu.io/upload_images/1727565-c1b8ba37329beea5.png)

点击不同分类
        //将事件委托给父元素,根据点击的分类进行处理(html的设置好li的value值)
        if (target.value == '0') {
            showProv2();  
        } else if (target.value == '1') {
            showCity2(current2.prov);
        } else {
            showCountry2(current2.city);
        }
  1. OK

原理深入分析

办法三:按字母逐风度翩翩选中城市

  1. 一贯按字母的依次选中城市这种方式比前二种更简便易行狂暴也较为轻松,代码量也比较少。
  2. 先看看这种艺术的意义图:
![](https://upload-images.jianshu.io/upload_images/1727565-bedaaf659eab83d0.png)

按字母顺序选中城市
  1. 页面加载时先出示热点城市
![](https://upload-images.jianshu.io/upload_images/1727565-efbe780be1222fbf.png)

按字母顺序选中城市
  1. 点击分化字母集,显示相应的都市列表
switch (index) {
            case 0:    //0为热门项
                showHotCity();
                break;
            case 6:    //6为最后一栏,字母集个数为2
                showCitys(index, 2);
                break;
            default:   //其余索引,字母集个数都为4
                showCitys(index, 4);
        }

function showCitys(index, m) {
    //通过传入的参数截取城市数据的一部分为当前要显示的城市列表
    var currentAll = cityAll.slice(4 * index - 3, 4 * index + m - 3);  

    .....

    //将动态生成的列表项放到显示区域
}
  1. 点击具体某八个都会时,将其出示在输入框中。
![](https://upload-images.jianshu.io/upload_images/1727565-19d2cf930d2cc2cd.png)

按字母顺序选中城市
  1. 这种方法的都会数量面前三种分裂,来源于英特网,无法确认保证真实性及完整性,仅供案例使用,数据格式如下(完整版):
var cityAll = [
    {
        name: "hot",
        citys: ["北京", "上海", "广州", "深圳", "杭州", "南京", "成都", "重庆", "武汉", "长沙", "昆明"]
    },
    {
        name: "A",
        citys: ["阿坝", "阿拉善", "阿里", "安康", "安庆", "鞍山", "安顺", "安阳", "澳门"]
    },

    ......


    {
        name: "Z",
        citys: ["杂多县", "赞皇县", "枣强县", "枣阳市", "枣庄",.......,资阳"]
}

7.完美~

(1)利用中继器的多寡存款和储蓄功效,用多在那之中继器分别存放省份、城市、区域数据;

小结

  1. 详尽代码看上边给出了链接,有注释的额(firefox和chrome可不荒谬呈现)~
  2. 这两种达成格局为一厢情愿,迎接大佬们指导,如有更加好的能够告知作者,笔者来宏观完备~
  3. 有人能告诉笔者咋做gif图么?

(2)利用“省份下拉”元器件的单击事件触发省份下拉接纳的展现与潜伏;

(3)利用不常变量将入选的省份称号赋值给省份输入框,进而体现当前已选省份;

(4)利用“省份输入框”元器件的文书改换事件,触发城市文本输入框的来得及城市下拉选项框的原委;

(5)利用“城市下拉”元器件的当选状态事件,决断省份是还是不是选中,未选中城市则交给“请先选拔省份!”的大谬不然提醒;

(6)城市、区域涉及的各零器件设置情势同“2、3、4、5”步骤。

元件寻思

图片 7

  1. 省份输入框背景(省份背景),放在输入框尾巴部分
  2. 省区输入框(省份呈现),用于体现已接受的省份称号
  3. 省区下拉提示Logo(省份选用),用于点击触发突显下拉选项,隐敝下拉采撷
  4. 省区下拉结缘选项(满含壹在那之中继器sf,动态面板sfn,动态面板sfw),用于显示全数省区名字
  5. 城市输入框背景(城市背景卡塔尔国,放在输入框尾部
  6. 城市输入框(城市显得卡塔尔(英语:State of Qatar),用于显示已接收的都市名称
  7. 都会下拉提示Logo(城市政委员会大选择),用于点击触发呈现下拉选项,隐敝下拉筛选
  8. 城市下拉组合选项(包含叁当中继器cs,动态面板csn,动态面板csw),用于显示全部城市名字
  9. 县区输入框背景(县区背景),放在输入框尾巴部分
  10. 县区输入框(县区文字),用于呈现已采撷的城郭称号
  11. 县区下拉提示图标(县区选拔),用于点击触发展现下拉选项,隐讳下拉精选
  12. 县区下拉构成选项(包罗壹在那之中继器xq,动态面板xqn,动态面板xqw),用于显示全部县区名字
  13. 操作提醒组合元器件(提示框卡塔尔(英语:State of Qatar),用于展示校验出错开上下班时间的唤醒
  14. 背景,整个案例的事必躬亲背景,可要可不要

掩盖提示文件,重新结构元器件后效果如下:

图片 8

福寿绵绵步骤 1. 预备省份数据及操作展现零器件

拖入叁在这之中继器sf,给中继器的暗中认可Column0列增加全国具备省份数量,要增添“请采纳”数据

图片 9

将中继器的数据通过每项加载时赋值给矩形,矩形显示的数量正是省份待选项数据

图片 10

将中继器sf转变为动态面板sfn,动态面板的轻重为220px*240px。设置动态面板的滚动条属性为“自动展现垂直滚动条”

图片 11

实用小本事:将可滚动的动态面板sfn调换为动态面板sfw,动态面板的轻重为200px*240px。设置动态面板的轮转条属性为“无”,进而能够达成滚动且掩没滚动条的功能

图片 12

有备无患四个零部件,分别是:省份背景矩形放在最上边,省份显示文本框放在中间层,省份选用矩形放在最上面。

省区数据涉嫌的保有元器件收拾后如下图所示:

图片 13

省份数据涉嫌的富有元器件收拾后如下图所示:

图片 14

  1. 预备城市数据及操作彰显零部件

cs中继器(城市待选数据)有两列,一列s保存省份数量,一列cs保存城市数目,注意省份与城市的看护关系。其他操作步骤同省份数据,此处不再描述。

图片 15

  1. 计划县区数量及操作呈现构件

图片 16

  1. 设置省份数占有关元件事件

单击省份接纳时,切换该零零部件的当选状态;选中时,箭头向上(FontAwesome字体),彰显省份下拉筛选;撤废选中时,箭头向下(FontAwesome字体),掩盖省份下拉接受

图片 17

省区下拉精选张开,单击某风流倜傥项时,将该项值赋值给省份显示文本框,相同的时候触发省份采用的单击事件(作用是隐瞒省份下拉选项框)

图片 18

当省份呈现文本框内容退换时,将城市显得文本框的内容改为请选取(重新恢复生机设置城市数量),触发城市中继器的载入事件

图片 19

4、设置城市数目有关元器件事件

单击城市政委员会大选择时,切换该零件的入选状态;

当选时,必要看清省份突显的文字是不是为请选拔:

撤除选中时,箭头向下(FontAwesome字体),隐蔽城市下拉精选

图片 20

中继器增加筛选功效,仅展现已入选省份对应的城堡数据,设置情势如下:

图片 21

当城市显得文本框内容退换时,将县区文字文本框的剧情改为请选取(重新初始化县区数量)

图片 22

  1. 设置县区数量有关元器件事件

县区各零部件点击、呈现事件与都市各零件生机勃勃致,以下是事件设置截图,具体不在描述

图片 23

图片 24

实用小本事:利用展现事件的“灯箱效果”,背景象为黄褐,光滑度设置为三分之一。提示效率很好看貌。

图片 25

此案例已成功,点击查看上黄金年代篇案例《动态随机获取“大小写字母与数字”验证码》;

作者:十一月大神,个人网址: www.pmgod.cn

本文由 @1月大神 原创公布于人人都以付加物老总。未经许可,禁止转发

题图来源 Unsplash ,基于 CC0 左券再次回到乐乎,查看愈来愈多

小编: