注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码
充值

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

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2024-03-22
jQuery遮罩弹出地区二级和三级联动代码
一款仿招聘网站的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>