layui省市县三级联动和获取选中值

下载文件

准备：首先去layui官网下载layui文件和下载layui扩展插件

layui网址：https://www.layui.com/

layui扩展下载网址：https://fly.layui.com/extend/layarea/#download

载入文件

在html head载入layui.css、jquery、layui.js、layarea.js文件

<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/layarea.js"></script>

html

<div class="container">
   <div class="layui-form" >
   <div class="layui-form-item" id="area-picker">
   <div class="layui-form-label">地域：</div>
   <div class="layui-input-inline" style="width: 200px;">
   <select name="province" class="province-selector" lay-filter="province-1">
      <option value="">请选择省</option>
   </select>
   </div>
   <div class="layui-input-inline" style="width: 200px;">
   <select name="city" class="city-selector" lay-filter="city-1">
      <option value="">请选择市</option>
   </select>
   </div>
   <div class="layui-input-inline" style="width: 200px;">
   <select name="county" class="county-selector" lay-filter="county-1">
      <option value="">请选择区</option>
   </select>
   </div>
   </div>
   </div>
   <input class="ui-Btn" type="button" value="提交" style="background: rgb(3, 197, 255);">
</div>

css

.ui-Btn {
    max-width: 350px;
    width: 100%;
    height: 46px;
    line-height: 46px;
    margin-top: 20px;
    background: #00BDFF;
    border-radius: 2px;
    color: #fff;
    border: 0 none;
    letter-spacing: 4px;
    font-size: 16px;
}

js

在底部添加载入layui方法,然后就可以看见三级联动效果了

layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form,
        layarea = layui.layarea;
 
        layarea.render({
            elem: '#area-picker',
            data: {
                 province: '四川省',
                 city: '成都市',
                 county: '锦江区',
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });
});
    //配置插件目录
layui.config({
        base: '/static/js/'
        , version: '1.0'
});

然后我们点击提交按钮获取选中的三级联动的值

$('.ui-Btn').on('click',function(){
    var province = $('.province-selector').parent().find('.layui-input').val();
    var city = $('.city-selector').parent().find('.layui-input').val();
    var county = $('.county-selector').parent().find('.layui-input').val();
    console.log(province);
    console.log(city);
    console.log(county);
});