1. 引入JS

<script src="static/js/jquery.min.js"></script>
<script src="static/js/iPicker.min.js"></script>

2. HTML代码

        <div class="container">
            <h1>iPicker<span>地区选择组件</span></h1>
            <div class="wrapper">
                <div class="box">
                    <div class="picker">
                        <p>常规用法</p>
                        <div class="demo" id="demo-1"></div>
                        <div>
                            <button class="reset">重置</button>
                        </div>
                    </div>
                    <div class="console">
                        <p>选择结果：</p>
                        <pre></pre>
                    </div>
                </div>
                <div class="box" style="height: 300px;">
                    <div class="picker" style="height: 268px;">
                        <p>设置层级</p>
                        <div class="demo" id="demo-2-1"></div>
                        <div class="demo" id="demo-2-2"></div>
                        <div class="demo" id="demo-2-3"></div>
                        <div>
                            <button class="reset">重置</button>
                        </div>
                    </div>
                    <div class="console">
                        <p>选择结果：</p>
                        <pre></pre>
                        <pre></pre>
                        <pre></pre>
                    </div>
                </div>
                <div class="box">
                    <div class="picker">
                        <p>设置宽度</p>
                        <div class="demo" id="demo-3"></div>
                        <div>
                            <button class="reset">重置</button>
                        </div>
                    </div>
                    <div class="console">
                        <p>选择结果：</p>
                        <pre></pre>
                    </div>
                </div>
                <div class="box">
                    <div class="picker">
                        <p>默认值</p>
                        <div class="demo" id="demo-4"></div>
                        <div>
                            <button class="reset">重置</button>
                        </div>
                    </div>
                    <div class="console">
                        <p>选择结果：</p>
                        <pre></pre>
                    </div>
                </div>
                <div class="box">
                    <div class="picker">
                        <p>默认禁用</p>
                        <div class="demo" id="demo-5"></div>
                        <div>
                            <button class="reset">重置</button>
                        </div>
                    </div>
                    <div class="console">
                        <p>选择结果：</p>
                        <pre></pre>
                    </div>
                </div>
                <div class="box">
                    <div class="picker">
                        <p>自定义占位文字</p>
                        <div class="demo" id="demo-6"></div>
                        <div>
                            <button class="reset">重置</button>
                        </div>
                    </div>
                    <div class="console">
                        <p>选择结果：</p>
                        <pre></pre>
                    </div>
                </div>
                <div class="box">
                    <div class="picker">
                        <p>限制列表高度</p>
                        <div class="demo" id="demo-7"></div>
                        <div>
                            <button class="reset">重置</button>
                        </div>
                    </div>
                    <div class="console">
                        <p>选择结果：</p>
                        <pre></pre>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var $pre = $( "pre" );
            var $picker = $( ".picker" );
            $.getJSON( "static/json/area.json" ).done(function ( res ) {
                $( "#demo-1" ).iPicker({
                    data: res,
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 0 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-2-1" ).iPicker({
                    data: res,
                    level: 1,
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 1 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-2-2" ).iPicker({
                    data: res,
                    level: 2,
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 2 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-2-3" ).iPicker({
                    data: res,
                    level: 3,
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 3 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-3" ).iPicker({
                    data: res,
                    width: 120,
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 4 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-4" ).iPicker({
                    data: res,
                    defaultValue: [ "230000", "230800", "230805" ],
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 5 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-5" ).iPicker({
                    data: res,
                    disabled: [ 1, 2 ],
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 6 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-6" ).iPicker({
                    data: res,
                    placeholder: [ "选择省份", "选择市", "选择区" ],
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 7 ).html( text + "<br><br>" + value );
                    }
                });
                $( "#demo-7" ).iPicker({
                    data: res,
                    maxHeight: 180,
                    onSelect: function ( v, t, set ) {
                        var text = "[ " + t + " ]";
                        var value = "[ " + v + " ]";
                        $pre.eq( 8 ).html( text + "<br><br>" + value );
                    }
                });
            })
            $( "button.reset" ).each(function ( i ) {
                $( this ).click(function () {
                    $( this ).parents( ".picker" ).next().find( "pre" ).empty();
                    $picker.eq( i ).children( ".demo" ).iPicker( "reset" );
                })
            })
        </script>