layui 地区三级联动 form select 渲染

本文介绍了一个使用layui框架实现的城市三级联动功能,通过PHP加载数据库字段让某个城市默认被选中,并展示了具体的HTML和JS代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html

<!-- 城市三级联动 -->

    <div class="layui-form-item">
        <label class="layui-form-label require_start"><span>所在城市 :</span></label>

        <div class="layui-input-inline">
            <select id="province" name="province" lay-filter="province">
                <option id="province_init" value="0-0">请选省份</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="city" name="city" lay-filter="city">
                <option id="city_init" value="0-0">请选择市</option>
            </select>
        </div>
    </div>

js

// 初始数据
    var areaData = <?php echo json_encode($cities); ?>;
    var $form;
    var form;
    var $;
    layui.use(['jquery', 'form'], function() {
        $ = layui.jquery;
        form = layui.form;
        $form = $('form');
        loadProvince();
        console.log(areaData);
        var pi = 0;

        for (var index in areaData) {
            if (areaData[index]['provinceCode'] == {{ $assset_auth->province or 0 }}) {
                var proid = {{$assset_auth->province}};
                console.log(proid+'---proid') //当前是355
                var province_value = areaData[index]['provinceCode']+'_'+areaData[index]['mallCityList'].length+'_'+pi;
                console.log(province_value+'--------province_value') //当前是 355_1_42

                $("#province").find("option[value='"+province_value+"']").attr("selected", true);
                // 载入city
                loadCity(areaData[index]['mallCityList']);

                var ci = 0;
                for (var ci in areaData[index]['mallCityList']) {
                    if (areaData[index]['mallCityList'][ci]['cityCode'] == {{ $assset_auth->city or 0 }}) {
                        var city_value = areaData[index]['mallCityList'][ci]['cityCode']+'_0_'+ci;
                        $("#city").find("option[value='"+city_value+"']").attr("selected", true);
                    }
                    ci++;
                }
            }
            pi++;
        }
        layui.form.render('select','boardFilter');
    });

这是select 选择证件 额外赠送

<!-- 选择证件类型行内判断 -->

    <div class="layui-form-item">
        <label class="layui-form-label"><span>证件类型 :</span></label>
        <div class="layui-input-inline">
            <select name="card_category">
                <option value="" selected>请选证件类型</option>
                <option value="1" {{ $param!==NULL ? ($assset_auth->card_category==1 ? 'selected' : '') : '' }}>身份证</option>
                <option value="2" {{ $param!==NULL ? ($assset_auth->card_category==2 ? 'selected' : '') : '' }}>军官证</option>
                <option value="3" {{ $param!==NULL ? ($assset_auth->card_category==3 ? 'selected' : '') : '' }}>护照</option>
                <option value="4" {{ $param!==NULL ? ($assset_auth->card_category==4 ? 'selected' : '') : '' }}>港澳通行证</option>
                <option value="5" {{ $param!==NULL ? ($assset_auth->card_category==5 ? 'selected' : '') : '' }}>台胞证</option></select>
        </div>
    </div>

总结一句

  • 后台PHP开发 加载数据库字段 让你默认选中 某一个城市
  • 关键步骤在 layui.form.render(‘select’,’boardFilter’);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值