select多选上传与回显选中赋值

最新推荐文章于 2024-10-02 14:35:31 发布

原创最新推荐文章于 2024-10-02 14:35:31 发布 · 959 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍如何使用HTML的select实现多选上传功能，并在编辑时回显已选择的数据。需要引用bootstrap-multiple.js来实现该功能。

select多选上传与回显选中赋值

html：

<div class="form-group">
   <label class="col-sm-4 control-label">项目成员：</label>
   <div class="col-sm-5">
      <select multiple="multiple" id="team" name="team" class="form-control"></select>
   </div>
</div>

js上传显示所有成员数据并多选上传。注：导入bootstrap-multiple.js文件

$.ajax({
	type : "POST",
	url :prefix + "",
	dataType : "json",
	success : function(data) {
		var temp = data.data.userList;
		for (var i = 0; i < temp.length; i++) {
			$("#team").append("<option value=" + temp[i].id + ">" + temp
				[i].realname + "</option>");
		}
		$("#team").multiselect("destroy").multiselect({
			// 自定义参数，按自己需求定义
			nonSelectedText : '--请选择--',
			maxHeight : 350,
			includeSelectAllOption : true,
			numberDisplayed : 5
		});
	}
});

function save() {
	var formData = new FormData();
	var team = $.trim($('#team').val());
	formData.append("team",team);
	if($("#signupForm").valid()){
		$.ajax({
			type : "POST",
			url : prefix + "",
			data : formData,
			cache : false,
			processData : false,
			contentType : false,
			success : function(data) {
				if (data.code == 200) {
					parent.layer.msg("操作成功",{icon:1});
				} else {
					parent.layer.alert(data.message,{icon:2});
				}
			}
		});
	}
}

编辑成员显示并选中被返回的数据

$.ajax({
	type: "post",
	url: prefix + "",
	data: {id:id},
	dataType: "json",
	success: function(data){
		if (data.code == 200) {
		
			// 项目成员列表
			var projectTeamList = data.data.projectTeamList;
			// 成员列表
			var userList = data.data.userList;
			 requirementList = data.data.requirementList;

			// 显示成员列表
			for (var i = 0; i < userList.length; i++) {
				$("#team").append("<option value=" + userList[i].id +">" + userList[i].realname + "</option>");
			}

			// 勾选成员
			for (var i = 0; i < userList.length; i++) {
				$("#team option").each(function () {
					var val = $(this).val();
					for (var j = 0; j < projectTeamList.length; j++) {
						if (val == projectTeamList[j].id) {
							$(this).attr("selected", "selected");
						}
					}
					$("#team").multiselect("destroy").multiselect({
						// 成员多选
						nonSelectedText : '--请选择--',
						maxHeight : 350,
						numberDisplayed : 5
					});
				})
			}

		
		} else {
			alert(data.message);
		}
	},
});

标签

#html #select