本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • jQuery省市区街道四级联动代码
    时间:2019-12-25 20:16 来源:开源之家 作者:开源之家测试提供 下载:52 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:70.8 KB
    • 运行环境:HTML
    • 下载次数:52 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    jQuery省市区街道四级联动代码

    特效描述:jQuery 省市区街道 四级联动代码,jQuery省市区街道四级联动代码

    代码结构

    1. 引入CSS

    1
    2
    <link rel="stylesheet" type="text/css" href="style/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="style/common.css">

    2. 引入JS

    1
    2
    3
    <script type="text/javascript" src="script/jquery.min.js"></script>
    <script type="text/javascript" src="script/jquery.citys.js"></script>
    <script src="http://passer-by.com/data_location/version.js"></script>

    3. HTML代码

    <div class="main">
        <div id="demo" class="citys">
            <p>
                <select name="province"></select>
                <select name="city"></select>
                <select name="area"></select>
            </p>
        </div>
        <div class="code">
            <p>通过地区编码初始化设置</p>
            <p>$('#demo').citys({code:350206});</p>
        </div>
        <script type="text/javascript">
            $('#demo').citys({code:350206});
        </script>
        <div id="demo1" class="citys">
            <p>
                <select name="province"></select>
                <select name="city"></select>
                <select name="area"></select>
            </p>
        </div>
        <div class="code">
            <p>通过地区名称初始化设置,并且下拉框值为地区名称</p>
            <p>$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});</p>
        </div>
        <script type="text/javascript">
            $('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});
        </script>
        <div id="demo2" class="citys">
            <p>
                <select name="province"></select>
                <select name="city"></select>
                <select name="area"></select>
            </p>
            <p id="place">请选择地区</p>
        </div>
        <div class="code">
        <p>事件处理</p>
    <pre>
    $('#demo2').citys({
    required:false,
    nodata:'disabled',
    onChange:function(data){
    var text = data['direct']?'(直辖市)':'';
    $('#place').text('当前选中地区:'+data['province']+text+' '+data['city']+' '+data['area']);
    }
    });
    </pre>
        </div>
        <script type="text/javascript">
            $('#demo2').citys({
                required:false,
                nodata:'disabled',
                onChange:function(data){
                    var text = data['direct']?'(直辖市)':'';
                    $('#place').text('当前选中地区:'+data['province']+text+' '+data['city']+' '+data['area']);
                }
            });
        </script>
        <div id="demo3" class="citys">
            <p>
                <select name="province"></select>
                <select name="city"></select>
                <select name="area"></select>
                <select name="town"></select>
            </p>
        </div>
        <div class="code">
          <p>扩展显示行政区划第四级(街道)信息:</p>
    <pre>
    var $town = $('#demo3 select[name="town"]');
    var townFormat = function(info){
    $town.hide().empty();
    if(info['code']%1e4&&info['code']<7e6){  //是否为“区”且不是港澳台地区
    $.ajax({
        url:'http://passer-by.com/data_location/town/'+info['code']+'.json',
        dataType:'json',
        success:function(town){
            $town.show();
            for(i in town){
                    $town.append('&lt;option value="'+i+'"&gt;'+town[i]+'&lt;/option&gt;');
            }
        }
    });
    }
    };
    $('#demo3').citys({
    province:'福建',
    city:'厦门',
    area:'思明',
    onChange:function(info){
        townFormat(info);
    }
    },function(api){
    var info = api.getInfo();
    townFormat(info);
    });
    </pre>
        </div>
        <script type="text/javascript">
            var $town = $('#demo3 select[name="town"]');
            var townFormat = function(info){
                $town.hide().empty();
                if(info['code']%1e4&&info['code']<7e5){  //是否为“区”且不是港澳台地区
                    $.ajax({
                        url:'http://passer-by.com/data_location/town/'+info['code']+'.json',
                        dataType:'json',
                        success:function(town){
                            $town.show();
                            for(i in town){
                                    $town.append('<option value="'+i+'">'+town[i]+'</option>');
                            }
                        }
                    });
                }
            };
            $('#demo3').citys({
                province:'福建',
                city:'厦门',
                area:'思明',
                onChange:function(info){
                    townFormat(info);
                }
            },function(api){
                var info = api.getInfo();
                townFormat(info);
            });
        </script>
        <div class="example">
            <div class="call">
                <h1>调用方法:</h1>
                <p>$(selector).citys(options,callback);</p>
            </div>
            <h2> options参数</h2>
            <table>
                <thead>
                    <tr>
                        <th width="150">参数</th>
                        <th width="120">默认值</th>
                        <th>说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>dataUrl</td>
              &
    

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信