iPicker

<script src="https://unpkg.com/new-ipicker@latest"></script>

<script src="https://cdn.jsdelivr.net/npm/new-ipicker@latest"></script>

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

<div id="target"></div>

<script>
    iPicker.create("#target", {
        data: {
                    
            // 此处以通过 jquery 库获取本地数据源为例
            source: Promise.resolve( $.getJSON( "area.json" ) )
        }
    })
</script>

<div id="target"></div>

<script>
    iPicker.create("#target", {
    
        // 此处以通过 jquery 库获取本地数据源为例
        // 使用内置数据源时，必须保证 source 属性值是标准的 Promise 对象
        // iPicker 会自动调用 then 方法，同时要确保 then 方法的参数就是返回的数据（Object 类型）
        data: {
            source: Promise.resolve( $.getJSON( "area.json" ) )
        }
    });
</script>

<div id="target"></div>

<script>
    iPicker.create("#target", {
        data: {
            
            // 此处以通过 jquery 库获取数据为例
            // 示例代码中使用的 "http://www.abcddcba.com/api/area" 是模拟地址，实际应用中替换成真实地址即可
            // code 参数值就是相应地区对应的行政区划代码
            // ----------------------------------------------------------------------------------------------------------
            // 使用自定义数据源时，必须保证 source 属性值是 Function 类型
            // iPicker 会自动执行此函数，同时要确保此函数的执行结果返回的是标准的 Promise 对象
            // iPicker 会自动调用 then 方法，同时要确保 then 方法的参数就是返回的数据（Array 类型）
            // ----------------------------------------------------------------------------------------------------------
            // 初始状态下，iPicker 会自动执行一次 source 函数来获取 “省份” 数据，此时传入的 code 参数值为 null
            // 因此，开发者可能需要给 code 参数设置一个默认值来获取 “省份” 数据（如示例代码中 code 为 null 时默认取零）
            source: code => $.get( "http://www.abcddcba.com/api/area/areaId=" + ( code || 0 ) )
        }
    });
</script>


<!-- 上面的示例代码使用了一个统一的地址返回数据 -->
<!-- 也可以传入第二个参数，根据此参数可分别设置 “省市区” 不同的数据源 -->
<script>
    iPicker.create("#target", {
        data: {
            source: function ( code, level ) {
                var data = "";

                // level 表示层级（范围 1-3 代表：省-市-区）
                switch ( level ) {

                    // 省数据源
                    // 初始状态下，iPicker 会自动执行一次 source 函数来获取 “省份” 数据，此时传入的 code 参数值为 null
                    // 因此，开发者可能需要给 code 参数设置一个默认值来获取 “省份” 数据（如示例代码中 areaId=0）
                    case 1: data = $.get( "http://www.abcddcba.com/api/province/areaId=0" ); break;

                    // 市数据源
                    case 2: data = $.get( "http://www.abcddcba.com/api/city/areaId=" + code ); break;

                    // 区数据源
                    case 3: data = $.get( "http://www.abcddcba.com/api/district/areaId=" + code ); break;
                }
                return data;
            }
        }
    });
</script>


<!-- 
    - iPicker 默认会调用返回数据中 code 和 name 属性，例如：
      [{
          code: "110000",
          name: "北京市"
      }]
    - 可以通过设置 props 来自定义属性名
-->
<script>
    iPicker.create("#target", {
        data: {
            props: {
                code: "areaId",
                name: "areaName"
            },
            source: code => $.get( "http://www.abcddcba.com/api/area/areaId=" + ( code || 0 ) )
        }
    });
</script>

// select 模式
iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    theme: "select"
});

// cascader 模式
iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    theme: "cascader"
});

// panel 模式
iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    theme: "panel"
});

iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    selected: [ "230000", "230100", "230103" ],
    selectedCallback: () => console.log( "默认值设置成功" )
});

iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    onSelect: ( code, name, all ) => {
            
        // 返回参数均为数组形式
        console.log( code );
        console.log( name );
        console.log( all );
    }
});

iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    level: 2
});

// 禁用全部层级
iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    disabled: true
});

// 禁用指定层级，仅限 select 主题模式下
iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    disabled: [ 2, 3 ]
});

// 禁用全部地区
iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    disabledItem: true
});

// 禁用指定地区
iPicker.create("#target", {
    data: {
        source: Promise.resolve( $.getJSON( "area.json" ) )
    },
    disabledItem: [ "230000", "230100", "230103" ]
});

// 01. 创建组件
const picker = iPicker.create( "#target", { ... } );

// 01. 创建组件（上述用法的简写）
const picker = iPicker( "#target", { ... } );

// 02. 设置选中项
iPicker.set( picker, [ "230000", "230100", "230103" ] );

// 03. 获取选中项（前两种等效）
iPicker.get( picker );
iPicker.get( picker, "code" );
iPicker.get( picker, "name" );
iPicker.get( picker, "all" );

// 04. 清空选中项
iPicker.clear( picker );

// 05. 重置（恢复初始状态）
iPicker.reset( picker );

// 06. 销毁组件
iPicker.destroy( picker );

// 07. 启用所有层级
iPicker.enabled( picker, true );

// 07. 启用指定层级，范围：1 - 3，仅限 select 主题模式下
iPicker.enabled( picker, [ 2, 3 ] );
iPicker.enabled( picker, 3 );

// 08. 禁用所有层级
iPicker.disabled( picker, true );

// 08. 禁用指定层级，范围：1 - 3，仅限 select 主题模式下
iPicker.disabled( picker, [ 2, 3 ] );
iPicker.disabled( picker, 3 );

// 09. 启用所有地区
iPicker.enabledItem( picker, true );

// 09. 启用指定地区
iPicker.enabledItem( picker, [ "230000" ] );

// 10. 禁用所有地区
iPicker.disabledItem( picker, true );

// 10. 禁用指定地区
iPicker.disabledItem( picker, [ "230000" ] );