iPicker

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

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

npm i new-ipicker -S

const iPicker = require( "new-ipicker" );

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

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

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

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

$.getJSON( "area.json" ).then(function ( response ) {
    iPicker("#target", {
        data: response,
        theme: "cascader"
    });
})

$.getJSON( "area.json" ).then(function ( response ) {
    iPicker("#target", {
        data: response,
        selected: [ "230000", "230100", "230103" ]

        // 也可以是 name 形式
        // selected: [ "黑龙江省", "哈尔滨市", "南岗区" ]
    });
})

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

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 ] );

// 销毁（移除 iPicker 组件）
iPicker.destroy( picker );