省市区三级联动

这里我们使用  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":"u5e7fu4e1cu7701","child":[{"id":"31","name":"u6c5fu95e8u5e02","child":[{"id":"32","name":"u84ecu6c5fu533a"}]},{"id":"35","name":"u8087u5e86u5e02","child":[{"id":"36","name":"u745eu5ddeu533a"}]},{"id":"11","name":"u60e0u5ddeu5e02","child":[{"id":"34","name":"u6c5du6e56u9547"},{"id":"43","name":"u5c0fu91d1u53e3u9547"},{"id":"12","name":"u5927u4e9au6e7eu897fu533a"},{"id":"23","name":"u60e0u9633u533a"},{"id":"22","name":"u60e0u57ceu533a"}]},{"id":"7","name":"u4f5bu5c71u5e02","child":[{"id":"29","name":"u5357u6d77u533a"},{"id":"39","name":"u987au5fb7u533a"},{"id":"8","name":"u7985u57ceu533a"}]},{"id":"5","name":"u4e1cu839eu5e02","child":[{"id":"33","name":"u4f01u77f3u9547"},{"id":"28","name":"u5357u57ceu533a"},{"id":"26","name":"u5beeu6b65u9547"},{"id":"46","name":"u957fu5b89u9547"},{"id":"41","name":"u5858u53a6u9547"},{"id":"40","name":"u677eu5c71u6e56u9ad8u65b0u79d1u6280u5de5u4e1au56edu533a"},{"id":"10","name":"u5927u5cadu5c71u9547"},{"id":"6","name":"u8336u5c71u9547"},{"id":"13","name":"u4e1cu57ceu533a"},{"id":"19","name":"u864eu95e8u9547"},{"id":"18","name":"u539au8857u9547"}]},{"id":"3","name":"u5e7fu5ddeu5e02","child":[{"id":"47","name":"u4eceu5316u5e02"},{"id":"30","name":"u5357u6c99u533a"},{"id":"27","name":"u841du5c97u533a"},{"id":"45","name":"u589eu57ceu533a"},{"id":"44","name":"u8d8au79c0u533a"},{"id":"42","name":"u5929u6cb3u533a"},{"id":"25","name":"u8354u6e7eu533a"},{"id":"9","name":"u4eceu5316u533a"},{"id":"4","name":"u767du4e91u533a"},{"id":"21","name":"u9ec4u57d4u533a"},{"id":"20","name":"u82b1u90fdu533a"},{"id":"17","name":"u6d77u73e0u533a"},{"id":"16","name":"u756au79bau533a"}]},{"id":"14","name":"u4e2du5c71u5e02","child":[{"id":"37","name":"u6c99u6eaau9547"},{"id":"38","name":"u5e02u8f96u533a"},{"id":"24","name":"u706bu70acu5f00u53d1u533a"},{"id":"15","name":"u4e1cu533a"}]}]}];
//初始化插件
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');
});