Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

jQuery遮罩弹出地区二级和三级联动代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-07-30
一款仿招聘网站的jQuery遮罩弹出地区二级和三级联动代码,点击弹出省市区三级联动、省市二级联动城市选择代码。


js代码

<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/thr-linkage-1.0.js"></script>
<script type="text/javascript" src="js/areaData.js"></script>
<script type="text/javascript">
    $(function () {
        var thisThr1 = $.linkAgeInit({
            shade:0.4,
            dataIndex:3,
            dataModel:'data',
            dataSource:app_area_data,
            showSelectHtml:'<li data-id="{code}" data-route="{route}" class="">{area}</li>',
            showCheckHtml:'<dd data-id="{code}" data-route="{route}" class="{_on_}">{area}</dd>',
            dataOnePid:1,
            dataIdKey:'code',
            closeCallBack:function (data) {
                console.log('你点击了关闭!' , data);
            },
            confirmCallBack:function (data) {
                console.log('你点击了确定!' , data);
            }
        });

        var thisThr2 = $.linkAgeInit({
            shade:0.4,
            dataIndex:2,
            dataModel:'data',
            dataSource:app_area_data,
            showSelectHtml:'<li data-id="{code}" data-route="{route}" class="">{area}</li>',
            showCheckHtml:'<dd data-id="{code}" data-route="{route}" class="{_on_}">{area}</dd>',
            dataOnePid:1,
            dataIdKey:'code',
            closeCallBack:function (data) {
                console.log('你点击了关闭!' , data);
            },
            confirmCallBack:function (data) {
                console.log('你点击了确定!' , data);
            }
        });

        $("#thisBind1").click(function () {
            thisThr1.open('.form-div');
        })
        $("#thisBind2").click(function () {
            thisThr2.open('.form-div');
        })
        $("#thisBind3").click(function () {
            thisThr1.set([
                {id:442001001,name:'石岐区街道'},
                {id:442001006,name:'五桂山街道'},
                {id:442001004,name:'西区街道'}
            ]);
            thisThr1.open('.form-div');
        })
    })
</script>