optiontransferselect例子

最新推荐文章于 2025-08-15 09:50:45 发布

转载最新推荐文章于 2025-08-15 09:50:45 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dream-to-pku/p/5936201.html

文章标签：

#javascript #json #java #ViewUI

本文介绍如何使用 Struts2 的 OptionTransferSelect 标签实现部门选择功能的动态赋值。通过 jQuery 和 AJAX 实现了部门列表的动态加载与更新，以及科护士长管理科室的选择。关键步骤包括动态生成选项、处理 Map 数据结构以及获取选定的部门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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://www.cnblogs.com/dream-to-pku/p/5936201.html