【Layui】后台异步加载select下拉菜单
2019-01-16 本文已影响3人
9f2574578be9
目标
实标“服务器环境”下拉菜单的动态赋值,避免每增加/修改一个选项需要修改代码的不便。
效果图标例
前端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,显示出数据
} } });}