java中动态初始化下拉框以及修改操作时的下拉框赋值

写在前面的话：

这个帖子只是为了记录我在工作中遇到的一些bug，以便日后重蹈覆辙，目前小编还是一名在校大四学生，在公司实习不足半年，可能记录的问题会非常简单和出现一些错误，希望各位浏览的大神一笑而过，不吝指教，文明看帖，拒绝喷子，谢谢！

言归正传，今天在公司做一个多表的级联查询，在做搜索功能时，初始化select下拉框遇到了一些问题，因为下拉框的初始化值需要绑定数据库。一开始我的想法是这样的，代码如下：

<select name="roleId" class="form-control" id="roleId">

<option value="0">---</option>

<option value="2">工程师</option>

<option value="3">主管</option>

<option value="4">客服主管</option>

<option value="5">管理员</option>

</select>

却在测试中发现这样的代码不是动态的，不会随着数据库值的改变而改变，所以使用了JavaScript来动态加载下拉框，代码如下：

$(function () {

callSapiServer("/role/list",function(data){

document.getElementById("roleId").options.add(new Option("请选择职位",0));

for(var i in data.results){

//document.getElementById("roleId").append("<option value = "+data.results[i].id+">"+data.results[i].role_name+"</option>");

document.getElementById("roleId").options.add(new Option(data.results[i].role_name,data.results[i].id));

}

},"GET",null);

});

这里调用了一个callSapiServer()方法，这是一个封装的ajax请求。这样就可以动态加载下拉框的初始值了。

在做更新操作时，需要给下拉框赋值为更新前的选中值，所以要在上一个代码的基础上进行改变，将ajax的异步刷新控制，代码如下：

$(function () {

callSapiServer("/role/list",function(data){

document.getElementById("roleId").options.add(new Option("请选择职位",0));

for(var i in data.results){

document.getElementById("roleId").options.add(new Option(data.results[i].role_name,data.results[i].id));

}

},"GET",null,true,null,function(){

var roleId = $("#hidden_roleId").val();

$("#roleId").val(roleId);

});

});

在修改的时候，先用JavaScript加载下拉框，然后再为这个select进行赋值，这个时候select框的默认值就是更新前的选中值。