前端小技术总结

项目开发完了，总结一下这段时间用的前端的技术。

1、多选框动态加载

<div class="form-group">
     <label class="col-sm-2 control-label">学科</label>
     <div class="col-sm-10" id="subjectIds">
     </div>
</div>

function getSubjectList() {
   ajaxWithUser("/course/getAllSubject", {type:1}, function (data) {
　　　　　　　var list = data.data;
            var optionStr = '';
            for (var i = 0; i < list.length; i++) {
                optionStr = optionStr + "<label>"
                    + "<input name='subjectIdList' class='form-control' type='checkbox' value=" + list[i].id + ">" +
                    list[i].name + "</label>"
            }
            $("#subjectIds").html(optionStr);
        });

    }

    　　　　编辑回显

//取消选中
        $("#subjectIds input").each(function () {
            for(var i=0;i<data.subjectIdList.length;i++) {
                $(this).prop("checked",false);
            }
        });
//选中
$("#subjectIds input").each(function () {
            for(var i=0;i<data.subjectIdList.length;i++) {
                if($(this).val() == data.subjectIdList[i]){
                    //3.选中
                    $(this).prop("checked",true);
                }
            }
        });

　　　　获取选中的值

var subjectIds = $("input:checkbox[name='subjectIdList']:checked").map(function(index,elem) {
                    return $(elem).val();
                }).get().join(',');

2、下拉框

//动态填写下拉框
function changeSelect(id, obj) {
    var optionStr = "<option value='-1'>" + "请选择" + "</option>";
    for (var i = 0; i < obj.length; i++) {
        optionStr = optionStr + "<option value='" + obj[i].id + "'>" + obj[i].name + "</option>"
    }
    $("#" + id).html(optionStr);
}