美文网首页layui入门
【Layui】后台异步加载select下拉菜单

【Layui】后台异步加载select下拉菜单

作者: 9f2574578be9 | 来源:发表于2019-01-16 14:05 被阅读3次

    目标

    实标“服务器环境”下拉菜单的动态赋值,避免每增加/修改一个选项需要修改代码的不便。


    效果图标例

    前端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,显示出数据
    } } });}
    

    相关文章

      网友评论

        本文标题:【Layui】后台异步加载select下拉菜单

        本文链接:https://www.haomeiwen.com/subject/qvkmdqtx.html