layui三级联动

<div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-inline">
        <select id="province" lay-filter="province" lay-verify="required" lay-search="">
            <option value="">请选择或搜索省</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select id="city" lay-filter="city" lay-verify="required" lay-search="">
            <option value="">请选择或搜索市</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select id="area" lay-filter="area" lay-verify="required" lay-search="">
            <option value="">请选择或搜索县/区</option>
        </select>
    </div>
</div>

layui.use('form', function(){
var form = layui.form;
var provinceText = "";
var cityText = "";
var areaText = "";
//异步加载下拉框数据
$.post("<?=\yii\helpers\Url::toRoute('region/index')?>", {"parent_id":0}, function (data) {
    var oData = eval('(' + data + ')'),
        $html = "";
    for (i in oData){
        $html += "<option value='" + i + "'>" + oData[i] + "</option>";
    }
    $("#province").append($html);
    //append后必须从新渲染
    form.render('select');
});

//监听省下拉框
form.on('select(province)', function(dataObj){
    //移除城市下拉框所有选项
    $("#city").empty();
    var cityHtml = '<option value="">请选择或搜索市</option>';
    $("#city").html(cityHtml);
    var areaHtml = '<option value="">请选择或搜索县/区</option>';
    $("#area").html(areaHtml);
    provinceText = $("#province").find("option:selected").text();
    var value = $("#province").val();

    $.post("<?=\yii\helpers\Url::toRoute('region/index')?>",{"parent_id":value},function (data) {
        var oData = eval('(' + data + ')'),
            $html = "";
        for (i in oData){
            $html += "<option value='" + i + "'>" + oData[i] + "</option>";
        }
        $("#city").append($html);
        form.render('select');
    });
});

//监听市下拉框
form.on('select(city)', function(dataObj){
    //移除县区下拉框所有选项
    $("#area").empty();
    var html = '<option value="">请选择或搜索县/区</option>';
    $("#area").html(html);

    cityText = $("#city").find("option:selected").text();
    var value = $("#city").val();
    if(!value){
        form.render('select');
        return false;
    }
    //异步加载下拉框数据
    $.post("<?=\yii\helpers\Url::toRoute('region/index')?>",{"parent_id":value},function (data) {
        var oData = eval('(' + data + ')'),
            $html = "";
        for (i in oData){
            $html += "<option value='" + i + "'>" + oData[i] + "</option>";
        }
        $("#area").append($html);
        form.render('select');
    });
});
//监听县区下拉框
form.on('select(area)', function(dataObj){
    areaText = $("#area").find("option:selected").text();
    form.render('select');
});
});

【侵删】

参考文献：

https://www.jb51.net/article/166334.htm

来源：oschina

链接：https://my.oschina.net/u/2292141/blog/3140656