`

js多选框左移

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
  <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
<LINK href="${color}/css.css" type=text/css rel=stylesheet>
<SCRIPT language=javascript src="js/iframe.js"></SCRIPT>
 <script language="javascript">
  function checkInput(){
  if(document.all.rightList.length==0){
  alert("请选择部门或人员");
  return false;
  }
  var str="";
  for(var i=0;i<document.all.rightList.length;i++){
  str=document.all.rightList.options[i].value+";"+str;
  }
  document.form1.sendMember.value = str;
  document.all.form1.submit();
  }
  function UserMove (nType) {
    if (nType == 0) return moveItem (document.all.leftList, document.all.rightList, false);
    if (nType == 1) return moveItem (document.all.rightList, document.all.leftList, false);
    if (nType == 2) return moveItem (document.all.leftList, document.all.rightList, true);
    if (nType == 3) return moveItem (document.all.rightList, document.all.leftList, true);
}

//移动选中的项目
function moveItem (sObj, tObj, allFlg) {
 if (sObj==null || tObj==null) return;
    var i=0;
    while (sObj.length > i) {
     if (allFlg || sObj.options(i).selected) {
      createOption(tObj, sObj.options(i).text, sObj.options(i).value);
        sObj.remove (i);
     } else {
      i++;
     }
    }
    sObj.selectedIndex = -1;
    tObj.selectedIndex = -1;
    return;
}
  function createOption(s, txt, v) {
 var eItem = document.createElement ("OPTION");
 s.add (eItem);
 eItem.innerText = txt;
 eItem.value = v;
}
function dept(){
document.all.leftList.options.length=0;
var j=0;
var ttt=new Array;
<logic:present name="dept">
 <logic:iterate id="et" name="dept">
  <logic:present name="et">
ttt[j]=new Array('<bean:write name="et" property="deptName"/>');
j++;
</logic:present>
</logic:iterate>
</logic:present>
for(m = 0;m<j;m++){
      createOption(document.all.leftList, ttt[m][0], ttt[m][0]);
 }
}
function user(){
document.all.leftList.options.length=0;
var j=0;
var ttt=new Array;
<logic:present name="user">
 <logic:iterate id="et" name="user">
  <logic:present name="et">
ttt[j]=new Array('<bean:write name="et" property="name"/>','<bean:write name="et" property="userShowId"/>');
j++;
</logic:present>
</logic:iterate>
</logic:present>
for(m = 0;m<j;m++){
      createOption(document.all.leftList, ttt[m][0], ttt[m][1]);
 }
}
  </script>
    <base target="_self">
</head>

<body marginwidth="0" topmargin="0" leftmargin="0" marginheight="0">
  <%Tools tool=new Tools();
   tool.getUsers(request);
   tool.getDept(request);
   %>
<%
String timecheck = String.valueOf(System.currentTimeMillis());
request.getSession().setAttribute("timecheck", timecheck);
%>
  <form name="form1" method="post" action="manageIncept.do">
  <input type="hidden" name="id" value="<%=request.getParameter("id") %>">
  <input type="hidden" name="sendMember">
  <input type="hidden" name="active" value="send">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 
  <tr>
    <td align="center" valign="top" background="${color}/oa_39.gif" class="xian1"><table width="92%" border="0" cellpadding="0" cellspacing="3" bgcolor="#F5F5F5" class="lankuang" style="margin:15px 0 15px 0;">
      <tr>
        <td colspan="7" align="center" bgcolor="#FFFFFF">
          <table width="96%" border="0" cellspacing="5" cellpadding="0" style="margin:10px 0 10px 0;">
            <tr>
        <td width="102"><input type="radio" name="radiobutton" value="dept" onclick="return dept();">
        指定部门</td>
        <td width="97"><input type="radio" name="radiobutton" value="people" checked onclick="return user();">指定人员</td>
        <td width="19">&nbsp;</td>
        <td width="62"></td>
        <td width="85"></td>
      </tr>
      <tr>
        <td colspan="2"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" rowspan="4"><select name="leftList" size=2 style='height:200px;width:200px;'>
        <logic:present name="user">
   <logic:iterate id="ac" name="user">
   <logic:present name="ac"> 
          <option value="<bean:write name="ac" property="userShowId"/>"><bean:write name="ac" property="name"/></option>
          </logic:present>
          </logic:iterate>
          </logic:present>
        </select></td>
        <td><input type="button" name="Submit" onClick="UserMove(1)" value="<"></td>
        <td colspan="2" rowspan="4"><select name="rightList" size=2 style='height:200px;width:200px;'>
        </select></td>
      </tr>
      <tr>
        <td><input type="button" name="Submit2" onClick="UserMove(0)" value=">"></td>
      </tr>
      <tr>
        <td><input type="button" name="Submit3" onClick="UserMove(3)" value="<<"></td>
      </tr>
      <tr>
        <td><input type="button" name="Submit4" onClick="UserMove(2)" value=">>"></td>
      </tr>
      <tr>
        <td colspan="5">
        <input type="button" name="Submit6" onClick="checkInput()" value="确定选择">
        <input type="button" name="Submit7" onClick="window.close()" value="关闭"></td>
      </tr>
            
          </table>
        </td>
      </tr>
    </table></td>
  </tr>
</table>
</form>
 
  </body>
</html>

分享到:
评论

相关推荐

    js 穿梭框,可以从左边到右边,也可以从右到左,支持多选

    JavaScript穿梭框,通常被称为“选择框”或“穿梭列表”,是一种常见的前端交互组件,用于在两个列表之间方便地转移选项。这种组件常用于数据筛选、用户权限设置等场景,允许用户从一组选项中选择多个项目并移动到另...

    老裴帮助关于Jquery实现多选文本框左移,右移,上移,下移的练习

    本文将深入探讨如何使用jQuery实现多选文本框(通常称为多选框或者复选框)的左移、右移、上移和下移功能。这在创建动态用户界面时尤其有用,例如在拖放排序或调整选项顺序的场景。 首先,我们需要理解多选文本框的...

    jQuery左右列表按钮控制穿梭框

    "jQuery左右列表按钮控制穿梭框"是网页交互设计中的一种常见功能,常用于数据选择和转移,例如在表单中选择多个选项。这种设计通常包含两个并排的列表框,一个显示可供选择的项目,另一个显示已选择的项目。用户可以...

    jquery 多选列表框

    用户可以通过点击或拖拽操作,将选项从左移到右,或者从右移回左,这样的设计使得用户能够方便地管理并查看已选和未选的项目。 使用 jQuery 多选列表框时,你需要在页面中引入 jQuery 库以及该插件的 JavaScript 和...

    JavaScript总结

    空格在JavaScript中通常是可选的,但为了代码的可读性,建议在适当的地方使用空格。分号虽然在某些情况下可以省略,但推荐始终使用分号来结束语句,以防止可能的解析问题。注释有两种形式:单行注释(//)和多行注释...

    ListBox实现上移,下移,左移,右移的简单实例

    在这个实例中,我们看到如何使用JavaScript来实现ListBox中选项的动态移动,包括上移、下移、左移和右移的功能。这个功能常用于需要调整列表顺序或者在两个ListBox之间交换项目的场景。 首先,我们来看一下HTML部分...

    2021-2022计算机二级等级考试试题及答案No.5455.docx

    - 复选框则允许用户选择多个选项,不具有互斥性。 - 两个控件的Value属性通常用于表示选中状态,但具体取值可能因编程语言而异,选项A的描述可能适用于某些语言。 - 选项C正确指出复选框不支持DblClick事件,因为...

    基于bootstrap的双向选择器

    1. **左移与右移**:用户可以选择一个或多个项目,将其从左侧列表移动到右侧列表,或者从右侧列表移动到左侧列表。这通常代表一种选择状态的改变,例如,将某个角色从“可用”移动到“已选”。 2. **全部左移与全部...

    自定义可拖动列

    这需要实现一种选择机制,如复选框、全选/全不选按钮等,然后在选中的基础上执行拖放操作。 - **响应式设计**:确保在不同设备和屏幕尺寸上,拖动列的功能依然可用且直观。 - **性能优化**:大量数据时,频繁的DOM...

    JQuery实现select互换数据和上下移动

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能,即在两个...

    一个不错的日历选择一个不错的日历选择

    - **`scrollLeftMessage`** 和 **`scrollRightMessage`**:这两条消息定义了当用户点击左移或右移按钮时的提示信息,指导用户如何通过持续按住按钮来实现自动滚动。 - **`selectMonthMessage`** 和 **`...

    2021-2022计算机二级等级考试试题及答案No.13002.docx

    - 在JavaScript中,`onChange()`事件用于检测表单控件(如文本框、文本区、复选框等)内容的变化。 - 当文本框、文本区或列表框中的内容发生变化时,会触发`onChange()`事件。 - 正确答案为D,包括i、ii和iii。 ###...

    2021-2022计算机二级等级考试试题及答案No.11959.docx

    - **知识点说明**:单选按钮和复选框的Value属性通常用于指示其当前的状态(选中或未选中),而不仅仅是True或False这样的布尔值。 ### 正确答案:正确 ### 8. Word中的日期和时间插入 - **知识点说明**:在Word...

Global site tag (gtag.js) - Google Analytics