layui 下拉列表框获取值

最新推荐文章于 2025-06-26 13:03:27 发布

原创最新推荐文章于 2025-06-26 13:03:27 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #下拉列表

本文介绍如何使用layui框架的form模块动态加载下拉select元素的选项，通过发送Ajax请求获取数据，并利用jQuery遍历数据填充select元素，实现新增和编辑场景下不同需求的选择项渲染。

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

新增时： <div class="layui-form-item"> <label class="layui-form-label"><em class="require-mark">*</em>嗯嗯嗯</label> <div class="layui-input-block"> <select id="selectLineStart" name="busLineInfo.lineStart" lay-filter="required" placeholder="" value="" required lay-verify="required" autocomplete="off"> <option></option> </select> </div> </div>

layui.use(['form', 'layer', 'laydate'], function () {
    var laydate = layui.laydate;

    // 操作对象
    var form = layui.form
        , layer = layui.layer
        , $ = layui.jquery;
    //选择嗯嗯嗯
    util.sendAjax({
        type: 'POST',
        url: '#(ctxPath)/lineManager/line/findStaName',
        dataType: 'json',
        notice: false,
        success: function (resp) {
            if (resp.code == 0) {
                var data=resp.data;
                $.each(data, function (index, item) {
                    $('#selectLineStart').append(new Option(item.sta_name, item.id));
                });
                layui.form.render("select"); //刷新表单select选择框渲染
            }
        }
    });

编辑时：

<div class="layui-form-item"> <label class="layui-form-label"><em class="require-mark">*</em>嗯嗯</label> <div class="layui-input-block"> <select id="selectLineStart" name="busLineInfo.lineStart" lay-filter="required" placeholder="嗯嗯" value="#(busLineInfo.lineStart ??)" required lay-verify="required" autocomplete="off"> </select> </div> </div>

util.sendAjax({
    type: 'POST',
    url: '#(ctxPath)/lineManager/line/findStaName',
    dataType: 'json',
    notice: false,
    success: function (resp) {
        if (resp.code == 0) {
            var data=resp.data;
            $.each(data, function (index, item) {
                var aaa=$("#selectLineStart");
                if (item.id=="#(busLineInfo.lineStart)"){
                    $('#selectLineStart').append(new Option(item.sta_name, item.id,false,true));
                } else{
                    $('#selectLineStart').append(new Option(item.sta_name, item.id));
                }

            });
            layui.form.render("select"); //刷新表单select选择框渲染
        }
    }
});