城市三级联动

    在做商城的地址选择中，发现很多的城市数据都不太齐全。然后也亲自去看了一下淘宝里面的城市数据，发现大网站的数据都挺齐全的。然后在网上找插件，发现都是没有齐全的。之后找了一个个人认为挺好用的插件。这个也是淘宝的SUI移动端（传送门）。

    这个插件使用起来非常方便，只要添加如下代码

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
<script>
    (function($){
        $("#city-picker").cityPicker({
            toolbarTemplate: '<header class="bar bar-nav">\
            <button class="button button-link pull-right close-picker">确定</button>\
            <h1 class="title">选择收货地址</h1>\
            </header>'
        });
    })(Zepto);

</script>  

这里面要注意的是，要使用（function（$）{}）(Zepto);来限定里面的内容，因为jQuery与Zepto会产生冲突。然后我们再添加一个

<input type="text" id="city-picker">

这样子就完成了一个基本的城市三级联动的效果了。