省市区三级联动效果，使用city-picker

city-picker可以帮我们方便快捷的完成省市区三级联动的效果，简单快速，我们可以去官网上下载该插件： http://tshi0912.github.io/city-picker/
下载这个：city-picker-master.zip
解压之后：
这里写图片描述
复制 dist 下内容，到项目就可以使用
以下是简单的使用啦
在使用city-picker插件前需要导入4个文件(导入顺序不要弄错了):

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/self/city-picker.data.js"></script>
<script type="text/javascript" src="js/self/city-picker.js"></script>
<link rel="stylesheet" href="css/city-picker.css" />

使用html实现：

<body>
        <div style="position: relative;">
        <input type="text" name="area" data-toggle="city-picker" size="80" />
        </div>
    </body>

只需在标签中设置样式：data-togger=”city-picker”;
使用JS实现：

<body>
        <div style="position: relative;">
        <input type="text" name="area" id="area" size="80" />
        </div>
    </body>
    <script>
        $("#area").citypicker();
    </script>

在JS中给标签添加citypicker属性
清除city-picker选中的内容：

<body>
        <div style="position: relative;">
            <input type="text" name="area" id="area" size="80" />
            <button id="btn">清除</button>
        </div>
    </body>
    <script>
        $(function() {
            $("#area").citypicker();
            $("#btn").click(function() {
                $("#area").citypicker('reset');
            })
        })
    </script>

当我们点击清除按钮时，我们在输入框中选中的省市区的信息会被清除掉；
动态赋值：

    <body>
        <div style="position: relative;">
            <input type="text" name="area" id="area" size="80" />
            <button id="btn">赋值</button>
        </div>
    </body>
    <script>
        $("#area").citypicker();
        $("#btn").click(function() {
            //在赋值之前需要执行reset方法和destroy方法
            $("#area").citypicker('reset');
            $("#area").citypicker("destroy");
            $("#area").citypicker({
                province : "XX省",
                city : "XX市",
                district : 'XX县'
            });
        })
    </script>

当我们点击赋值按钮时，输入框中的值会被替换成我们在JS代码中设置的值；

省市区三级联动效果，使用city-picker

猜你喜欢