记录：ajax获取数据动态生成select下拉选js部份

js代码

$(document).ready(function() {
    $("#role").setRoleList();//调用下面js中的方法
});

jQuery.fn.extend({
    //获取roleName并动态生产select下拉选内容
    setRoleList:function(type){
        var target = this;
        $.ajax({
            type:"GET",
            url:"/RoleList",
            success:function(rtn){//rtn为后端传过来的List集合
                target.find('option').remove().end();
                target.append("<option value=\"0\">请选择</option>");  
                if (rtn.length == 0) {  
                       target.append($("<option></option>").attr("value", 0).text("查无资料"));  
                }else{
                       $.each(rtn, function(key, role) {//遍历  
                       if (type != null) {  
                           //將value中的属性值赋給option的value和文本內容
                           target.append($("<option selected='selected'></option>")
                               .attr("value", role.roleId).text(role.roleName));   
                        } else {  
                            target.append($("<option></option>")
                                .attr("value",role.roleId).text(role.roleName));
                        } 
                   }); 
                }
            }

        });
    }
});

html代码

<select id="role" style="width:100%">
</select>