省市区三级联动city-picker

最新推荐文章于 2024-09-13 22:42:38 发布

happy_meng

最新推荐文章于 2024-09-13 22:42:38 发布

阅读量5.1k

点赞数 1

分类专栏： citypicker 文章标签：省市级三级联动 citypicker

本文链接：https://blog.csdn.net/happy_meng/article/details/78889085

版权

citypicker 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

省市区三级联动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>