Struts2 OptionTransferSelect标签 动态赋值：

1、html片面：

<td class="td2">    <s:optiontransferselect    id="sysWard"    doubleId="userWard"    name="userDept"    list="deptMap"    listKey="key"    listValue=http://www.mamicode.com/"value"    multiple="true"    headerKey="cnKey"    leftTitle="选择部门向右添加"    doubleList="deptNameMap"    doubleListKey="key"    doubleListValue=http://www.mamicode.com/"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="http://www.mamicode.com/+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="http://www.mamicode.com/+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="http://www.mamicode.com/+key+">" + value + "</option>");});

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

关键点2：jquery遍历Map：

$.each(obj, function(key,value){    $("#userWard").append("<option value="http://www.mamicode.com/+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 选择框的值。

optiontransferselect例子