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

目标

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


15065120-337ee5c182d43813.png
效果图标例

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

猜你喜欢

转载自blog.csdn.net/weixin_34066347/article/details/87093834
今日推荐