LArea移动端城市选择控件

所属分类:输入-选择框

 91457  414  查看评论 (125)
分享到微信朋友圈
X
LArea移动端城市选择控件 ie兼容11

更新时间:2017/5/9 下午6:02:58

更新说明:升级到LArea1.72版  GC少量优化,css少量优化、修复BUG:Cannot read property 'textContent' of undefined


演示效果请在移动端或PC浏览器模拟移动端查看效果。

用法

在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"
    }]
};


相关插件-选择框

jQuery联动下拉菜单

一款简单实用的联动下拉菜单,第一的条件未选择的情况下无法选择第二个,以此类推
  选择框
 36319  309

jQuery世界地区三级联动

jQuery世界地区三级联动带搜索功能
  选择框
 37834  337

jQuery下拉框多选

下拉字母多选框
  选择框
 82374  329

js模拟ios联动插件iosselect

html下拉菜单select在安卓和IOS下表现不一样,iosselect正是为统一下拉菜单样式而生
  选择框
 27828  329

讨论这个项目(125)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    眼睛怎么睁都睁不大的乐乐 0
    2021/1/20 15:28:23

    点击城市会报错  
    修改js

    var gearVal = Math.abs(pos) / 2;

    修改为

    var gearVal = Math.abs(pos) / 2 || 0;
    回复
    zzz 0
    2020/7/4 10:41:52
    点击下面的省市会报错
        眼睛怎么睁都睁不大的乐乐1
        2021/1/20 17:06:20

        修改js

        var gearVal = Math.abs(pos) / 2;

        修改为

        var gearVal = Math.abs(pos) / 2 || 0;
    回复
    727727 0
    2019/6/10 15:08:17
    我要获取港澳台的城市 怎么办
        眼睛怎么睁都睁不大的乐乐1
        2021/1/20 17:06:42
        拿到有港澳台的json
    回复
    JoviChin 0
    2019/4/11 15:57:40
    数据源为'data':[provs_data, citys_data, dists_data]
    的时候,请问如何设置默认的省市区??
    area1.value=[1,13,3];//控制初始位置,注意:该方法并不会影响到input的value
    使用上面这个无效 回复
    near 0
    2018/12/24 17:24:33
    只要省市,怎么修改呢
        幸运的虫虫0
        2019/3/19 17:24:12
        只要省市,怎么修改呢
        去吧皮卡丘0
        2019/3/30 18:03:07
        同问,只要省市怎么修改呢
    回复
    my奥斯卡 0
    2018/12/17 11:45:19
    在滚动的时候点击确定,会一直报错,怎么解决? 回复
    最好的我们 0
    2018/11/8 11:05:15
    插件引进去之后就 Cannot read property 'addEventListener' 报这个错,大佬们怎么解决 回复
    Lastbook 0
    2018/10/18 14:19:38
    能够设置 根据数据格式,选择二级联动或者是三级联动吗? 就是当只有二级的时候,不显示第三级的空白处 回复
    异乡清宵寒 0
    2018/10/18 10:28:18
    我想获取省市区的字段和id号,可以拿到吗
        眼睛怎么睁都睁不大的乐乐1
        2021/1/20 17:10:13
        var Ocsite = $("#value2").val();

        获取隐藏input的val ID存在这,拿到省市区的字段 可以拿

        $("#demo2").val()

        提交的时候拿到值就行了

    回复
    ?⌒? 丶 郭 0
    2018/10/11 14:47:44
    这个是不是和vue有冲突 用vue就用不了了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复