欢迎访问WDPHP素材源码!今天是2021年08月01日 星期日,下午好!别打盹哦!
您好,游客 [ 马上登录 | 注册帐号 | QQ登录]
当前位置:首页 > 特效 > 表单按钮 > 手机端 省市区三级联动 HTML5地区选择代码

手机端 省市区三级联动 HTML5地区选择代码
栏目分类:表单按钮    发布日期:2017-12-06    浏览次数:6534次     收藏

手机端 省市区三级联动 HTML5地区选择代码是一款使用苹果手机IOS风格的三级联动城市选择器,纯原生js的移动端城市选择插件,不依赖任何库...
浏览次数:6534 文件大小:70.51KB 下载积分:10积分

纯原生js的移动端城市选择插件,不依赖任何库

用法

在html页面中引入input标签,写法如下:

<input id="demo1" type="text" readonly="" name="input_area" placeholder="城市选择特效"/>

将样式文件引入到页面中:

 <link rel="stylesheet" href="css/LArea.css">

同时引入js文件到页面中:

<script src="js/LArea.js"></script>

初始化插件:

var area = new LArea();
area.init({
    'trigger': '#demo1',//触发选择控件的文本框,同时选择完毕后name属性输出到该位置
    'valueTo':'#value1',//选择完毕后id属性输出到该位置
    'keys':{id:'id',name:'name'},//绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
    'type':1,//数据源类型
    'data':LAreaData//数据源
});
自定义数据源结构参考:
//初始化type=1时,参考下列数据源
var LAreaData1 = [{
         "id": "2",
         "name": "一级",
         "child": [{
              "id": "21",
              "name": "二级1",
              "child": [{
                  "id": "211",
                  "name": "三级1"
             }, {
                 "id": "212",
                 "name": "三级2"
             }, {
                 "id": "213",
                 "name": "三级3"
             }]
         }, {
             "id": "22",
             "name": "二级2"
         }, {
             "id": "23",
             "name": "二级3"
         }]
     }];
     
//初始化type=2时,参考下列数据源
var provs_data = [{
    "text": "省",
    "value": "1"
}, {
    "text": "省",
    "value": "2"
}];
var citys_data = {
    "1": [{
        "text": "市",
        "value": "11"
    }, {
        "text": "市",
        "value": "12"
    }],
    "2": [{
        "text": "市",
        "value": "21"
    }, {
        "text": "市",
        "value": "22"
    }]
};
var dists_data = {
    "11": [{
        "text": "区",
        "value": "111"
    }, {
        "text": "区",
        "value": "112"
    }],
    "21": [{
        "text": "区",
        "value": "211"
    }, {
        "text": "区",
        "value": "212"
    }]
};

申明:本站代码不提供任何技术服务,仅提供有偿服务。WDPHP素材源码所有资源都经过检测,请放心下载!

评论4
头像 游客
友情提示:评论成功赠送5积分(每日前3次),刷评论扣8积分!
  • 头像 4楼
    2021年05月14日
    小青
    不错的特效!!支持一下
  • 头像 板凳
    2018年11月06日
    370306875
    插件下下来怎么有一个报错,LArea.js:269 Uncaught TypeError: Cannot read property 'addEventListener' of null
  • 头像 椅子
    2018年05月07日
    webce
    不错的特效!学习了
  • 头像 沙发
    2018年01月12日
    zxjcn
    不错。支持一下
Copyright © 2016-2020 wdphp.com 版权所有   本站由WDPHP网站管理系统强力驱动  陕ICP备16002142号
网站首页 | 交流社区 | 关于我们 | 仿站定制 | 积分获取 | 广告投放 | 在线工具 | 站点地图
源码 模板 特效 素材 资源 教程 站长