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

写在前面的话：
本博客只是为了记录我在工作中遇到的一些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.getElemen