LArea实现html5手机移动端三级联动城市选择效果

在帮客户开发网站的时候,需要实现在手机端滑动控件,实现中国的省市区三级联动选择效果,网上查阅相关资料,发现可以通过LArea控件实现,下面作者将具体的使用方法贴出,希望对需要使用的朋友有所帮助,效果如下图:

LArea实现html5手机移动端三级联动城市选择效果

1、使用方法
1)html元素

<input type="text" class="picker"  placeholder="请选择您的所在区域" > 
<input type="hidden" value="" class="fuwuid">

2)引入样式文件、城市数据文件、脚本文件即可,并简单的调整下样式

<link rel="stylesheet" href="css/LArea.min.css">
<script src="js/LAreaData1.js"></script>
<script src="js/LAreaData2.js"></script>
<script src="js/LArea.min.js"></script>
<style>
      .larea_cancel{color:#878787;}
      .larea_finish{color:#fa8919;}
      .area_ctrl,.area_btn_box{background: #fff}
</style>

3)使用LArea插件脚本

<script>
     var area1 = new LArea();
     area1.init({
         'trigger': '.picker', //触发选择控件的文本框,同时选择完毕后name属性输出到该位置
         'valueTo': '.fuwuid', //选择完毕后id属性输出到该位置
         'keys': {
             id: 'id',
             name: 'name'
         }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
         'type': 1, //数据源类型
         'data': LAreaData //数据源
     });
     area1.value=[5,21,10];//控制初始位置,注意:该方法并不会影响到input的value
 </script>

2、官方下载链接:
https://github.com/xfhxbb/LArea,可以直接在官网下载最新源码

或者直接点击此处下载: LArea-master下载

相关推荐