EasyUI + js 实现下拉框多选展示和回显值

一、EasyUI + js 实现下拉框多选展示和回显值

<input id="checkPerIds" name="checkPerIds" prompt="请选择检查人员" editable="false" style="width: 350px" <%=ks ? "" : "class='easyui-combobox'" %> >

<th>已选择检查人th>
<td>
	<span id="createdept_fp_ry_2_span"><span>
td>
<td>
	<label class="btn btn-info" onclick="clearjcr('createdept_fp_ry_2');" type="button">清空检查人label>
td>

//请选择检查人员 下拉展示的时候
$('#checkPerIds').combobox({
	 			multiple:true,
				required:required,
		        url:'',
		        valueField:'USER_ID',
		        textField:'USER_NAME'
				//点击下拉框的，下拉框展示的时候
				onShowPanel: function (obj){
					checkPerson($("#checkPerIds"));
				},
				onChange: function (obj) {
					//下拉列表对象、下拉显示内容spanid
					selectdiv($("#checkPerIds"), "createdept_fp_ry_2_span","checkPerId");
					$("#perids").val(rl_id);
					$("#pernames").val(rl_name);
                    //可以在表单中新加一个 传值给后端
					//$("#checkPerId").val(rl_id);
				}
			});

//下拉多选
		var rl_id = [];
		var rl_name = [];

		function selectdiv(obj, div_id, input_id) {
			//循环移除,需求清空当前所有code、name，选中项加上
			var dlist = obj.combobox("getData");
			if (!dlist) return;
			for (var i = 0; i < dlist.length; i++) {
				for (var j = 0; j < rl_id.length; j++) {
					if (dlist[i].USER_ID == rl_id[j]) {
						rl_id.splice(j, 1);
						rl_name.splice(j, 1);
					}
				}
			}
			//循环添加
			if (obj.combobox("getValues")) {
				var temp = obj.combobox("getValues");
				var tempN = obj.combobox("getText").split(",");
				//循环添加
				for (var i = 0; i < temp.length; i++) {
					var falg = false;
					for (var j = 0; j < rl_id.length; j++) {
						if (rl_id[j] == temp[i]) {
							falg = true;
						}
					}
					if (!falg) {
						rl_id.push(temp[i]);
						rl_name.push(tempN[i]);
					}
				}
				$("#" + div_id).text(rl_name);
				$("#" + input_id).val(rl_id);
			}
			if (rl_id.length == 0) {
				$("#" + div_id).text("");
				$("#" + input_id).val("");
				rl_id = [];
				rl_name = [];
			}
		}
		//清空检查人
		function clearjcr(id) {
			$("#" + id).combobox("clear");
			$("#" + id + "_span").text("");
			$("#checkPerId").val("");
			$("#perids").val("");
			$("#pernames").val("");
			rl_id = [];
			rl_name = [];
		}
		// 回显所选人
		function checkPerson(obj) {
			var dlist = obj.combobox("getData");
			var per = [];
			if (!dlist) return;
			for (var i = 0; i < dlist.length; i++) {
				for (var j = 0; j < rl_id.length; j++) {
					if (dlist[i].USER_ID == rl_id[j]) {
						per.push(rl_id[j]);
					}
				}
			}
			$("#checkPerIds").combobox('setValue',per);
		}