layui select框 数据回显

前言

动态查询select下拉框数据，再进行回显

语法

Option option = new Option(name, value);

例子

省市区 三级联动

html

<div class="layui-form-item">
            <label class="layui-form-label">设备位置 省</label>
            <div class="layui-input-inline">
                <select name="provinceCode" id="provinceCode" lay-filter="provinceCode">
                </select>
            </div>

            <label class="layui-form-label">市</label>
            <div class="layui-input-inline">
                <select name="cityCode" id="cityCode" lay-filter="cityCode">
                </select>
            </div>

            <label class="layui-form-label">区</label>
            <div class="layui-input-inline">
                <select name="districtCode" id="districtCode" lay-filter="districtCode">
                </select>
            </div>
        </div>

js

    form.on("select(provinceCode)", function (obj) {
        getCity(obj.value);
        getDistrict($("#cityCode").val());
    });

    form.on("select(cityCode)", function (obj) {
        getDistrict(obj.value);
    });

    // 省
    getProvince();
    // 市
    getCity(provinceCode);
    // 区
    getDistrict(cityCode);

    // 省
    function getProvince() {
        var requestProvinceData = {};
        requestProvinceData['data'] = {};
        requestProvinceData['url'] = ctx + '/provinceCity/queryAllProvinceInfo.json';
        var responseProvinceData = request.requestFromJsonPost(requestProvinceData);
        if(responseProvinceData.data.success && "0000" == responseProvinceData.code){
            var resultData = responseProvinceData.data.result;
            $('#provinceCode').empty();
            for(var i in resultData) {
                var proviceCityCode = resultData[i].proviceCityCode;
                var proviceCityName = resultData[i].proviceCityName;
                $('#provinceCode').append(new Option(proviceCityName, proviceCityCode));
            }
            form.render('select');
        }
    }

    // 市
    function getCity(provinceCode) {
        var selectProvinceCode = provinceCode.value;
        if(undefined != selectProvinceCode && '' != selectProvinceCode && null != selectProvinceCode) {
            provinceCode = selectProvinceCode;
        }

        var requestAreaData = {};
        requestAreaData['data'] = {};
        requestAreaData['data']['superiorCode'] = provinceCode;
        requestAreaData['url'] = ctx + '/provinceCity/queryCityInfoByProvinceCode.json';
        var responseAreaData = request.requestFromJsonPost(requestAreaData);
        if(responseAreaData.data.success && "0000" == responseAreaData.code){
            var resultData = responseAreaData.data.result;
            $('#cityCode').empty();
            for(var i in resultData) {
                var proviceCityCode = resultData[i].proviceCityCode;
                var proviceCityName = resultData[i].proviceCityName;
                $('#cityCode').append(new Option(proviceCityName, proviceCityCode));
            }
            form.render('select');
        }
    }

    // 区
    function getDistrict(cityCode) {
        var selectCityCode = cityCode.value;
        if(undefined != selectCityCode && '' != selectCityCode && null != selectCityCode) {
            cityCode = selectCityCode;
        }

        var requestAreaData = {};
        requestAreaData['data'] = {};
        requestAreaData['data']['cityCode'] = cityCode;
        requestAreaData['url'] = ctx + '/provinceCity/queryDistrictInfoByCityCode.json';
        var responseAreaData = request.requestFromJsonPost(requestAreaData);
        if(responseAreaData.data.success && "0000" == responseAreaData.code){
            var resultData = responseAreaData.data.result;
            $('#districtCode').empty();
            for(var i in resultData) {
                var districtCode = resultData[i].districtCode;
                var districtName = resultData[i].districtName;
                $('#districtCode').append(new Option(districtName, districtCode));
            }
            form.render('select');
        }
    }

说明 

查询市、区之前，需要进行入参判断，是因为 使用了 form.on("select") select框监听事件，所以初始化的时候入参会把下拉框所有数据传入，所以只需要选择默认第一个value。

点击下拉框时，只会传入一个，此时就没问题，所以多加了判断。

结果