省市县distpicker的使用

简介:

下载地址https://github.com/fengyuanchen/distpicker

1.引入

<!-- 引入地址 begin -->
<script type="text/javascript" src="../plugin/distpicker/distpicker.data.js"></script>
<script type="text/javascript" src="../plugin/distpicker/distpicker.js"></script>
<!-- 引入地址 end -->

2.html布局

<div class="aui-list-item-inner" id="distpicker"  data-toggle="distpicker">
                    <div class="aui-col-xs-5">
                        <select id="province"></select>
                    </div>
                    <div class="aui-col-xs-7">
                        <select id="city"></select>
                    </div>
</div>

3.初始化

//          $("#distpicker").distpicker({autoSelect:false});
//          $("#distpicker").distpicker();
if (JSON.stringify(json.info.storeContact) != '[]' && json.info.storeContact.province != '') {
                $("#distpicker").distpicker({
                    province:json.info.storeContact.province,
                    city:json.info.storeContact.city
                });
} else {
                $("#distpicker").distpicker({autoSelect:false});
}

4.数据库只需要保存文字即可

422101-20161216172735511-2001835795.png

5.效果

422101-20161216172823183-462094426.png

无数据与默认数据都可以满足

422101-20161216173205995-807406202.png

422101-20161216173214620-1859647568.png


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6187800.html,如需转载请自行联系原作者

相关文章
|
19天前
|
SQL 存储 前端开发
省市县三级联动的实现方案
省市县三级联动的实现方案
74 0
|
机器学习/深度学习 人工智能 达摩院
亲历者口述:神奇的郑州“小汤山”是如何建成的?
神奇的郑州“小汤山”是如何建成的? 来听听几位一线建设者的口述。
亲历者口述:神奇的郑州“小汤山”是如何建成的?
发改委公布19年1-8月进出口额前五位省份情况,哪个在你的意料之外?
2019年9月30日,国家发改委公布2019年1-8月进出口额前五位省份情况,哪个省份在你的意料之外?
|
SQL 关系型数据库 数据库
|
JavaScript 数据库 前端开发