写在前面的话：
这个帖子只是为了记录我在工作中遇到的一些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>
却在测试中发现这样的代码不是动态的，不会随着数据库值的改变而改变，所以使用了 java Script来动态加载下拉框，代码如下：
$( 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框的默认值就是更新前的选中值。
