iPicker轻量级地区选择组件(原创)

所属分类:输入-选择框

 43212  210  查看评论 (9)
分享到微信朋友圈
X
iPicker轻量级地区选择组件(原创) ie兼容11

注:因调用外部json数据文件,需要在服务端预览,本地预览会有跨域问题!

更新时间:2021-02-03 23:35:59

更新说明:iPicker 核心程序升级到 v4.0.0


更新时间:2020-11-27 23:29:22

更新说明:iPicker 核心程序库升级到 v3.0.0


更新时间:2020/3/18 下午6:09:11

更新说明:程序库版本升级至 v2.1.0;data 参数支持传入 Promise;新增 activeColor 参数用来自定义高亮颜色。


更新时间:2020-02-06 23:35:30

iPicker

iPicker 是一个轻量级的地区选择组件,可以简单快速的对 “省市区” 进行选择

专门针对桌面端的现代高级浏览器,无任何第三方依赖完全使用原生 JavaScript 开发

安装组件

本地引入

<script src="ipicker.min.js"></script>

cdn 引入

<script src="https://unpkg.com/new-ipicker@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/new-ipicker@latest/dist/iPicker.min.js"></script>

npm 安装

npm i new-ipicker -S
const iPicker = require( "new-ipicker" );

使用方法

创建容器后,先获取 json 数据,然后调用 iPicker 方法即可:

<div id="target"></div>
<script>
    
    // 此处以通过 axios 库获取数据为例
    axios.get( "area.json" ).then(function ( response ) {
        iPicker("#target", {
            data: response.data
        });
    })
    
</script>

可以选择 cascader 主题

axios.get( "area.json" ).then(function ( response ) {
    iPicker("#target", {
        data: response.data,
        type: "cascader"
    });
})

设置默认选中值

axios.get( "area.json" ).then(function ( response ) {
    iPicker("#target", {
        data: response.data,
        selected: [ "230000", "230100", "230103" ]
        // 也可以是 name 形式
        // selected: [ "黑龙江省", "哈尔滨市", "南岗区" ]
    });
})

监听选中项的变化

axios.get( "area.json" ).then(function ( response ) {
    iPicker("#target", {
        data: response.data,
        onSelect: function ( code, name, all ) {
            
            // 有三种返回值(均为数组形式)
            console.log( code );
            console.log( name );
            console.log( all );
        }
    });
})

组件方法

iPicker 提供了六个方法:

123227_4782b14c_5535128.png

var picker = iPicker( "#target", { ... } );
// 获取选中结果(前两种等效)
iPicker.get( picker );
iPicker.get( picker, "code" );
iPicker.get( picker, "name" );
iPicker.get( picker, "all" );
// 清空选中结果
iPicker.clear( picker );
// 重置(恢复初始状态)
iPicker.reset( picker );
// 启用(全部)
iPicker.enabled( picker );
// 启用(指定层级,范围:0-2,仅限 select 主题模式下)
iPicker.enabled( picker, [ 0, 1 ] );
// 禁用(全部)
iPicker.disabled( picker );
// 禁用(指定层级,范围:0-2,仅限 select 主题模式下)
iPicker.disabled( picker, [ 0, 1 ] );

配置参数

参数说明类型默认值
theme主题模式,可选值:select, cascaderStringselect
data地区的 json 数据(必填项)Object{}
level数据的展示层级,范围:0-2(代表 1-3 级,省-市-区)Number2
width展示框的宽度,单位:px,cascader 模式下建议适当的增加Number200
maxHeight数据列表的最大高度,单位:pxNumber300
disabled默认禁用的展示框,设置为 true 时将禁用所有展示框;
在 select 模式下可传入数组形式,设置禁用指定层级的展示框,范围:0-2(代表 1-3 级,省-市-区)
Boolean / Arrayfalse
selected默认选中项,可以是 name 或 code 形式Array[]
placeholder展示框的占位文字,select 模式下是数组形式,cascader 模式下是字符串形式String / Array[ "省", "市", "区" ]
onSelect选择项改变时执行的回调函数,有 3 个回调参数:
1. code 数组
2. name 数组
3. code 与 name 的数组集合
Function空函数


相关插件-选择框

jQuery省市联动、下拉框表单美化

jQuery个人信息表单,联动、下拉框表单美化
  选择框
 42126  403

仿招聘网站选择地区、选择行业、选择职位效果

仿招聘网站选择地区、选择行业、选择职位效果
  选择框
 55314  404

jQuery移动端城市联动选择插件

修改jquery.area.js(by锐不可挡),添加热门城市功能
  选择框
 33293  333

jQuery移动端省市区三级联动选择框

仿淘宝移动端收货地址省市区的选择面板
  选择框
 89292  512

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

    r=a(1-sinθ) 0
    2022/4/8 17:20:11
    不想cdn引入,咋处理,想本地离线运行
        areyouOk0
        2022/4/8 20:31:25
        cdn引用文件调用本地就行了,主要问题是json数据文件本地调用会有跨域问题,需要对本地浏览器设置解除安全策略。
        r=a(1-sinθ)0
        2022/4/11 9:04:25
        那本地想直接运行咋解决跨域啊,直接用个jsonp就行吗,还用改别的不
    回复
    ★???★???★??? 0
    2022/3/17 11:14:12
    For better life 0
    2021/11/23 16:47:30
    Object 0
    2021/8/20 13:58:19
    可以支持IE浏览器吗 回复
    Object 0
    2021/8/20 13:57:14
    加蓬咝蝰 0
    2020/6/18 11:38:50
    不错,很实用

    楼主,这个可以扩展成 跨省市复选吗? 回复
    Mr.涅 0
    2020/4/22 17:21:34
    可以的给个好评 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复