Struts2 OptionTransferSelect标签 动态赋值

2019独角兽企业重金招聘Python工程师标准>>>

Struts2 OptionTransferSelect标签 动态赋值：

1、html片面：

<td class="td2">
    <s:optiontransferselect
	id="sysWard"
	doubleId="userWard"
	name="userDept"
	list="deptMap"
	listKey="key"
	listValue="value"
	multiple="true"
	headerKey="cnKey"
	leftTitle="选择部门向右添加"
	doubleList="deptNameMap"
	doubleListKey="key"
	doubleListValue="value"
	doubleName="userBean.placeDept"
	doubleHeaderKey="cnKey"
	rightTitle="科护士长管理科室"
	doubleMultiple="true"
	allowSelectAll="false"
	allowUpDownOnLeft="false"
	allowUpDownOnRight="false"
	addToLeftLabel="<<--向左"
	addToRightLabel="向右-->>"
	addAllToRightLabel="全选向右"
	addAllToLeftLabel="全选向左"
	cssClass="option"
	doubleCssClass="option"
    />
</td>

2、异步动态赋值：

// 选择科护士长 事件
$("#select_userBean").change(function(){
	$("#user_job_number").val($(this).val());

	$.ajax({
	    type:"post",
	    url:"ManagerDept_setSysDept_null_null",
	    data:{"userJobNumber":$("#user_job_number").val()},
	    async: false,
	    dataType:"json",
	    success:function(msg){
		var obj = eval(msg);
		$("#sysWard option").remove();//将select中的信息清空
		$.each(obj, function(key,value){
		    $("#sysWard").append("<option value="+key+">" + value + "</option>");
		});
	    }
	});
	$.ajax({
	    type:"post",
	    url:"ManagerDept_setUserDept_null_null",
	    data:{"userJobNumber":$("#user_job_number").val()},
	    async: false,
	    dataType:"json",
	    success:function(msg){
		var obj = eval(msg);
		$("#userWard option").remove();//将select中的信息清空
		$.each(obj, function(key,value){
			$("#userWard").append("<option value="+key+">" + value + "</option>");
		}); }
					});
				});

// 修改按钮 事件
$("#btn_updateManageDept").click(function(){
    var depts = "";
    $("#userWard").find("option").each(function(i){
	depts += $(this).val()+",";
    });
    depts = depts.substr(0,depts.length-1);
    $.ajax({
	type:"post",
	url:"ManagerDept_updateManagerDept_null_null",
	data:{"depts":depts,"userJobNumber":$("#user_job_number").val()},
	async: false,
	dataType:"json",
	success:function(msg){
	    if(msg == "1"){
		alert("更新成功！");
	    }else{
		alert("更新失败！");
	    }
	}
    });
});

********************************************************************************************************

关键点1：动态赋值：

$("#sysWard option").remove();//将select中的信息清空
$.each(obj, function(key,value){
    $("#sysWard").append("<option value="+key+">" + value + "</option>");
});

其实，就是获取分别获取左右的 select 选择框，并分别动态添加 <option>标签。

关键点2：jquery遍历Map：

$.each(obj, function(key,value){
    $("#userWard").append("<option value="+key+">" + value + "</option>");
});

如上代码，obj 对象时后台传递的Map对象，jquery 遍历 Map，不能像遍历Array一样，在function中传递i，作为数组索引。而是在function中传递两个参数 key 和 value，分别代表Map对象的key和value值。

关键点3：获取右边select的值：

var depts = "";
$("#userWard").find("option").each(function(i){
    depts += $(this).val()+",";
});
depts = depts.substr(0,depts.length-1);

获取右边 select 的值，不能知道获取。有两种方法，方法一：可以把右边框中的值设置全部选中，即将selected 属性设置为true；方法二：就如上文的获取select 选择框的值。

转载于:https://my.oschina.net/andy1989/blog/335890