city-picker省市区选择三级联动列表

网址：HTTP：//tshi0912.github.io/city-picker/
这是城市选取器的下载网址下载：city-picker-master.zip
这里写图片描述
还需要jQuery的文件
首先，我们需要在HTML页面中引入以下4个文件

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

一，两种指定城市选择器用法

HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML用法</title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script> <link rel="stylesheet" href="js/citypicker/css/city-picker.css" /> </head> <body> <div style="position: relative;"> <input name="area" type="text" data-toggle="city-picker" size="80"/> </div> </body> </html>
JS
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS用法</title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script> <link rel="stylesheet" href="js/citypicker/css/city-picker.css" /> <script type="text/javascript"> $(function(){ $("#area").citypicker(); }); </script> </head> <body> <div style="position: relative;"> <input id="area" name="area" type="text" size="80"/> </div> </body> </html>
清除城市选择器选中内容

$("#reset").click(function(){$ $(function(){$
$("#reset").click(function(){$

“'4。动态赋值

 charset="utf-8" />
        <title>JS用法</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script>
        <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script>
        <link rel="stylesheet" href="js/citypicker/css/city-picker.css" />
        <script type="text/javascript">
            $(function(){
                $("#area").citypicker();
                $("#setValBtn").click(function(){
                    // 赋值前，必须先执行 reset、destroy
                    $('#area').citypicker('reset');
                    $('#area').citypicker('destroy');

                    $('#area').citypicker({
                      province: '江苏省',
                      city: '常州市',
                      district: '溧阳市'
                    });
                });
            });
        </script>
    </head>
    <body>
        <div style="position: relative;">
            <input id="area" name="area" type="text" size="80"/>
            <input type="button" id="setValBtn" value="赋值"  />
        </div>
    </body>
</html>

city-picker省市区选择三级联动列表

猜你喜欢