Project development is over, to sum up the front end of the period with the technology.
1, checkbox dynamic loading
<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); }); }
Edit Echo
//取消选中 $("#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); } } });
Gets the selected value
var subjectIds = $("input:checkbox[name='subjectIdList']:checked").map(function(index,elem) { return $(elem).val(); }).get().join(',');
2, drop-down box
//动态填写下拉框 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); }