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

网址:HTTP://tshi0912.github.io/city-picker/
这是城市选取器的下载网址下载:city-picker-master.zip
city-picker省市区选择三级联动列表_第1张图片
还需要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" />

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

  1. HTML




    HTML用法










  2. JS




    JS用法











  3. 清除城市选择器选中内容









(function(){ (功能(){ (“#return”)。click(function(){
( “#reset”)。点击(函数(){










“'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省市区选择三级联动列表)