省市区三级联动city-picker

来源：互联网发布：g20杭州淘宝快递编辑：程序博客网时间：2024/06/11 18:31

省市区三级联动city-picker

1.下载地址
网址：

http://tshi0912.github.io/city-picker/

2.下载的文件详情

这里写图片描述

3.复制 dist 下内容，到项目就可以使用

4.使用详情

4.1首先引入四个文件

<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" />

4.2两种使用city-picker的方式第一种HTML的方式

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

第二种JS的用法（重置功能）

<script type="text/javascript">    $(function(){        $("#area").citypicker();        $("#reset").click(function(){            $("#area").citypicker('reset');            });        });</script>    </head><body>    <div style="position: relative;">    <input id="area" name="area" type="text" />    <input type="button" id="reset" value="重置" />    </div></body>

JS用法赋值功能

<script type="text/javascript">    $(function(){        $("#area").citypicker();            $("#setValBtn").click(function(){                //赋值前，必须先执行reset,destroy                $("#area").citypicker('reset');$("#area").citypicker('destroy');                   $('#area').citypicker({                province:'XX省',                city:'XX市',                district:'XX区'            });                 });    });</script></head><body>    <div style="position: relative;">        <input id="area" name="area" type="text"  size="100"/>        <input type="button" id="setValBtn" value="赋值" />    </div></body>

5.效果图
这里写图片描述

阅读全文

'); })();