layui select下拉框、radio单选框编辑回显

清清前端

已于 2023-05-31 17:33:46 修改

阅读量4.3k

点赞数 4

文章标签： layui servlet 前端

于 2022-08-11 16:54:08 首次发布

本文链接：https://blog.youkuaiyun.com/qing_er_/article/details/126288502

版权

本文介绍如何在layui框架中使用下拉框select和单选框radio实现域名类型及状态的选择功能，并展示了如何通过JavaScript进行初始化设置。

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

body部分使用layui下拉框select、单选框radio

这里以域名类型和状态为例

域名类型字段为official 0是非官网 1是官网

状态字段status 1是正常访问 2是禁止访问

    <div class="layui-form layuimini-form">
        <div class="layui-form-item" id="ymlx">
            <label class="layui-form-label">域名类型</label>
            <div class="layui-input-block">
                <select name="official" id="official" >
                    <option value="">请选择</option>
                    <option value="0">非官网</option>
                    <option value="1">官网</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="正常访问" id="status_0">
                <input type="radio" name="status" value="2" title="禁止访问" id="status_1">
            </div>
        </div>
    </div>

js部分给下拉框添加默认选择单选框做判断

这里需要注意一下下拉框、单选框等都是在form模块中运用的修改此类信息时需要在最后加form.render()语句更新渲染

layui.use(['form'], function () {
        var form = layui.form,
            $ = layui.jquery;
    
        getCategory (id)
        async function getCategory (id) {                          //通过传id拿到要编辑的某条数据
            const res = await getData('url接口', {id})            //自己封装的接口调用
            let {official,admin_id,status } = res
            $('input[name="admin_id"]').val(admin_id)             
            $('#official option[value=' + official + ']').attr('selected', true)  //select下拉编辑回显回显
            if(status == 0){
                $('#status_0').attr('checked', true)
            }else{                                              //radio单选框编辑回显
                $('#status_1').attr('checked', true)
            }
            form.render()               //在form模块下，一定要记得写form.render更新渲染
        }
})