11.Layui后台异步加载select下拉菜单

智江鹏

已于 2022-03-09 17:55:07 修改

阅读量5.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue开发文章标签： layui 前端 javascript

于 2019-09-05 14:35:43 首次发布

本文链接：https://blog.youkuaiyun.com/zxc472504515/article/details/100557577

Vue开发专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用layui前端框架结合jQuery AJAX技术，从前端html页面动态获取后端返回的服务器环境配置列表，并将其填充到下拉菜单中的过程。通过分析，详细展示了前端如何请求后端数据，解析JSON格式的返回结果，并动态生成option元素以更新select控件的选项。同时，后端使用SpringMVC框架，通过@RequestMapping注解处理请求，将配置数据转换为JSONObject格式并返回给前端。

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

前端html页面

    <label class="layui-form-label">服务器环境</label>
    <div class="layui-input-inline" style="width:150px;">
        <select name="server" id="server">
            <option value="">请选择服务器</option>
        </select>
    </div>
</div>

js脚本

$.ajax({
    url:"/selectServer",
    type:"GET",
    dataType:"json",
    success:function(result){
        var list = result;    //返回的数据
        var server = document.getElementById("server"); //server为select定义的id
        for(var p in list){
            var option = document.createElement("option");  // 创建添加option属性
            option.setAttribute("value",p); // 给option的value添加值
            option.innerText=list[p];     // 打印option对应的纯文本 
            server.appendChild(option);           //给select添加option子标签
            form.render("select");            // 刷性select，显示出数据
} } });}

后端controller返回JSONObject给前端作显示处理，如：{"xx":"aaa","yy":"bbb"}

@RequestMapping("/selectServer")
    public JSONObject selectServer(HttpServletRequest request){
        List<Config> configContent = new ArrayList<Config>();
        configContent = configService.getConfigList(null,9,null);
        JSONObject ServerJson = new JSONObject();
        for (Config c : configContent) {
            ServerJson.put(c.getConfigkey(), c.getConfigContent());
        }
        log.info("request:selectServer, response:" + ServerJson);
        return ServerJson;
    }