寫在前面的話：
本部落格只是為了記錄我在工作中遇到的一些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框的預設值就是更新前的選中值。