select加载数据和数据选中

最新推荐文章于 2025-06-11 18:58:17 发布

原创最新推荐文章于 2025-06-11 18:58:17 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

html 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了如何通过后台数据查询角色ID，并在前端动态生成下拉列表选项，实现用户角色的选择与匹配。同时，展示了如何利用JavaScript根据预设的模块类型在下拉菜单中进行选择操作。

后台

List<Map<String, Object>> list = jdbc.queryForList(sql);

model.addAttribute("roleId", list.get(0).get("ROLE_ID"));

前台

//data[i].role_id=1,2,3;

//data[i].role_name="成都"，"上海"，"北京";

tempValue=$("#user_role").val()

$.each(data,function(i,item){

var ui3="<option value='"+data[i].role_id+"'>"+data[i].role_name+"</option>"
$("#selectSysRoleId").append(ui3);
var obj = document.getElementById("selectRoleId");
if( obj[i].value==tempValue){
//下拉列表选中
obj[i].selected = true;
}

});

静态

<input id="moduleType" type="hidden" value="${moduleType}" />
<select class="form-control editinput" id="add_moduleType">
<option value="0" selected="selected">普通用户权限</option>
<option value="1">管理员权限</option>
<option value="2">超级管理员权限</option>
</select>

var moduleTypeValue=$("#moduleType").val();
var objtype = document.getElementById("add_moduleType");
for(var i=0;i<3;i++){
if( objtype[i].value==moduleTypeValue){
objtype[i].selected = true;
}
}