optiontransferselect例子

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 选择框的值。