省市区三级联动

Posted 2020-09-30 前端开发-阿锋

这里我们使用  LArea 插件 ，首先我们要先引入  LArea.min.js  LArea.min.css 这两个库。

html如下：

<input type="text" placeholder="请选择地区" class="bookingArea" id="txt_area5" readonly="true">

js如下：

//json是省市区，后台给的
var json = [{"id":"2","name":"\u5e7f\u4e1c\u7701","child":[{"id":"31","name":"\u6c5f\u95e8\u5e02","child":[{"id":"32","name":"\u84ec\u6c5f\u533a"}]},{"id":"35","name":"\u8087\u5e86\u5e02","child":[{"id":"36","name":"\u745e\u5dde\u533a"}]},{"id":"11","name":"\u60e0\u5dde\u5e02","child":[{"id":"34","name":"\u6c5d\u6e56\u9547"},{"id":"43","name":"\u5c0f\u91d1\u53e3\u9547"},{"id":"12","name":"\u5927\u4e9a\u6e7e\u897f\u533a"},{"id":"23","name":"\u60e0\u9633\u533a"},{"id":"22","name":"\u60e0\u57ce\u533a"}]},{"id":"7","name":"\u4f5b\u5c71\u5e02","child":[{"id":"29","name":"\u5357\u6d77\u533a"},{"id":"39","name":"\u987a\u5fb7\u533a"},{"id":"8","name":"\u7985\u57ce\u533a"}]},{"id":"5","name":"\u4e1c\u839e\u5e02","child":[{"id":"33","name":"\u4f01\u77f3\u9547"},{"id":"28","name":"\u5357\u57ce\u533a"},{"id":"26","name":"\u5bee\u6b65\u9547"},{"id":"46","name":"\u957f\u5b89\u9547"},{"id":"41","name":"\u5858\u53a6\u9547"},{"id":"40","name":"\u677e\u5c71\u6e56\u9ad8\u65b0\u79d1\u6280\u5de5\u4e1a\u56ed\u533a"},{"id":"10","name":"\u5927\u5cad\u5c71\u9547"},{"id":"6","name":"\u8336\u5c71\u9547"},{"id":"13","name":"\u4e1c\u57ce\u533a"},{"id":"19","name":"\u864e\u95e8\u9547"},{"id":"18","name":"\u539a\u8857\u9547"}]},{"id":"3","name":"\u5e7f\u5dde\u5e02","child":[{"id":"47","name":"\u4ece\u5316\u5e02"},{"id":"30","name":"\u5357\u6c99\u533a"},{"id":"27","name":"\u841d\u5c97\u533a"},{"id":"45","name":"\u589e\u57ce\u533a"},{"id":"44","name":"\u8d8a\u79c0\u533a"},{"id":"42","name":"\u5929\u6cb3\u533a"},{"id":"25","name":"\u8354\u6e7e\u533a"},{"id":"9","name":"\u4ece\u5316\u533a"},{"id":"4","name":"\u767d\u4e91\u533a"},{"id":"21","name":"\u9ec4\u57d4\u533a"},{"id":"20","name":"\u82b1\u90fd\u533a"},{"id":"17","name":"\u6d77\u73e0\u533a"},{"id":"16","name":"\u756a\u79ba\u533a"}]},{"id":"14","name":"\u4e2d\u5c71\u5e02","child":[{"id":"37","name":"\u6c99\u6eaa\u9547"},{"id":"38","name":"\u5e02\u8f96\u533a"},{"id":"24","name":"\u706b\u70ac\u5f00\u53d1\u533a"},{"id":"15","name":"\u4e1c\u533a"}]}]}];
//初始化插件
var area = new LArea();

area.init({
    ‘trigger‘: ‘#txt_area5‘,
    ‘keys‘: {
        id: ‘id‘,
        name: ‘name‘
    },
    ‘type‘: 1,
    ‘data‘: json,
    ‘ok‘:function (data) { //点击确定后触发事件
        console.log(data)
    },
    ‘close‘:function () { //取消事件回调函数
        $(‘body‘).removeClass(‘mask_body‘);
    }
});
$(‘#txt_area5‘).bind(‘click‘,function () {
    $(‘body‘).addClass(‘mask_body‘);
});