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>