省市区三级联动city-picker

省市区三级联动city-picker

1.下载地址
网址:

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

2.下载的文件详情

省市区三级联动city-picker_第1张图片

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.效果图
省市区三级联动city-picker_第2张图片

你可能感兴趣的:(citypicker)