在做前端页面表单的时候经常会使用到select选择框,如果选择框的数据比较少或者是固定的可以选择写死,但是一般我们的数据都是数量比较大而且是不固定的,所以要采用动态给select选择框赋值。
还有一种情况是:我们在做修改页面的时候想要一进入修改页面选择框中的值就已经获取到了,这种情况可以和动态给select选择框赋值一起使用。
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
<select name="rolename" id="rolename" lay-filter="rolename">
</select>
</div>
</div>
$.ajax({
type:'get',
url:'queryRoles',
success:function (data) {
// console.log(data)
for (var i=0;i<data.length;i++){
var sIndex = data[i].id;
var ivalue = data[i].roleName;
if (getUrlParam("roleId")==sIndex) {
$("#rolename").append("<option value="+sIndex+" selected>"+ivalue+"</option>");
}else{
$("#rolename").append("<option value="+sIndex+">"+ivalue+"</option>");
}
}
}
})
注意:if判断中放的是一进入修改页面select选择框就有的值,else中放的是动态给select选择框赋值
getUrlParam()方法是使用js写的获取页面url中某个参数值的方法