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

迈不过友情╰ 2022-05-14 05:45 271阅读 0赞

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

**使用html实现：**

只需在标签中设置样式：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代码中设置的值；

[http_tshi0912.github.io_city-picker]: http://tshi0912.github.io/city-picker/
[70]: /images/20220514/3d7d90d6a7ce4de8a8cc489a04e68af4.png