前台的页面显示，关于左右框内容移动问题 / iVAN

问题描述

如果所示，我想当我可选中左边的某一行，点击中间的移动，可以移动到右边去，当我点击右边的某一行可以移动到左边去，或者可以去除掉所有的，也可以添加所有的，如果能带查询的更好，谁有这方面的东西，教我一下，谢谢了。我后台用的JAVA。问题补充：<div class="quote_title">andy_javahome 写道</div><div class="quote_div">这是我曾经用过的一个html，你新建一个html粘进去直接就可以看效果。<br /><br /><br /><html><br />  <head><br />    <br />    <title> </title><br /><br /><link href="../../css/index.css" rel="stylesheet" type="text/css" /><br /><link href="../../css/leftmenu.css" rel="stylesheet" type="text/css" /><br /><link href="../../css/css.css" rel="stylesheet" type="text/css" /><br /><link href="../../css/dzkutd.css" rel="stylesheet" type="text/css" /><br /><script language="JavaScript"><br />function LTrim(str)<br />{<br />    var whitespace = new String("　 tnr");<br />    var s = new String(str);<br />    if (whitespace.indexOf(s.charAt(0)) != -1)<br />    {<br />        var j=0, i = s.length;<br />        while (j < i && whitespace.indexOf(s.charAt(j)) != -1)<br />        {<br />            j++;<br />        }<br />        s = s.substring(j, i);<br />    }<br />    return s;<br />}<br /><br />function GetObjID(ObjName) {<br />for ( var ObjID=0; ObjID < window.deptSelectForm.elements.length; ObjID++ )<br />if (window.deptSelectForm.elements[ObjID].name == ObjName ) {<br />return(ObjID);<br />break;<br />}<br />return(-1);<br />}<br /><br />function AppendItem(allMenu, menu, isAll) {<br />for (j=0; j<document.getElementById(allMenu).length; j++){<br />if (isAll == true || document.getElementById(allMenu).options[j].selected){<br />//GET VALUE<br />document.getElementById(allMenu).options[j].selected = false;<br />//GET LENGTH<br />DesLen = document.getElementById(menu).length;<br />// NEW OPTION<br />document.getElementById(menu).options[DesLen] = new Option(LTrim(document.getElementById(allMenu).options[j].text), document.getElementById(allMenu).options[j].value);<br />document.getElementById(allMenu).remove(j);<br />j--;<br />}<br />}<br />}<br />function turnUp() {<br />for (j=0; j<document.getElementById("resultDept").length; j++){<br />if (document.getElementById("resultDept").options[j].selected){<br />if (j == 0) {<br />alert("请从第二个开始选择");<br />return;<br />}<br />//GET VALUE<br />i = j - 1;<br />var obj = document.getElementById("resultDept").options[j];<br />var value = document.getElementById("resultDept").options[i].value;<br />var text = document.getElementById("resultDept").options[i].text;<br />document.getElementById("resultDept").options[i].value = obj.value;<br />document.getElementById("resultDept").options[i].text = obj.text;<br />document.getElementById("resultDept").options[i].selected = true;<br />document.getElementById("resultDept").options[j].value = value;<br />document.getElementById("resultDept").options[j].text = text;<br />document.getElementById("resultDept").options[j].selected = false;<br />}<br />}<br />}<br />function turnDown() {<br />for (j=document.getElementById("resultDept").length-1; j>-1; j--){<br />if (document.getElementById("resultDept").options[j].selected){<br />if(j==document.getElementById("resultDept").length - 1) {<br />alert("请从倒数第二个开始选择");<br />return;<br />}<br />//GET VALUE<br />i = j + 1;<br />var obj = document.getElementById("resultDept").options[j];<br />var value = document.getElementById("resultDept").options[i].value;<br />var text = document.getElementById("resultDept").options[i].text;<br />document.getElementById("resultDept").options[i].value = obj.value;<br />document.getElementById("resultDept").options[i].text = obj.text;<br />document.getElementById("resultDept").options[i].selected = true;<br />document.getElementById("resultDept").options[j].value = value;<br />document.getElementById("resultDept").options[j].text = text;<br />document.getElementById("resultDept").options[j].selected = false;<br />}<br />}<br />}<br />function ok()<br />{<br /><br />window.close();<br />}<br /></script><br />  </head><br />  <br />  <body><br /><table width="50%"style="border-right:solid 1px #aaccef; border-bottom:solid 1px #aaccef; border-top:solid 1px #aaccef; border-left:solid 1px #aaccef;" cellpadding="0" cellspacing="0" bgcolor="#f3f8fb" align="center"><br />    <tr height="30px"><br /><td colspan=4><br /><span>项目查询条件</span><br /></td><br /></tr><br /><tr><br />    <td width="20%" align="center"><br />    <select id="initDept" name="initDept" size="12" style="width:150px;" multiple="true"><br /><option value="1">项目状态</option><br /><option value="1">项目名称</option><br /><option value="1">境内外</option><br /><option value="1">所在大区</option><br /><option value="1">所在国家</option><br /><option value="1">建设地区代码</option><br /><option value="1">行业代码</option><br /><option value="1">重点行业</option><br /><option value="1">业务种类</option><br /><option value="1">五级分类</option><br />    </select><br />    </td><br />    <td width="5%" align="center"><br />        <input type="button" value="-->" onClick="return AppendItem('initDept', 'resultDept', false);"/><br />        <br><br />        <input type="button" value="==>" onClick="return AppendItem('initDept', 'resultDept', true);"/><br />        <br><br />        <br><br />        <input type="button" value="<--" onClick="return AppendItem('resultDept', 'initDept', false);"/><br />        <br><br />        <input type="button" value="<==" onClick="return AppendItem('resultDept', 'initDept', true);"/><br />    </td><br />    <td width="20%" align="center"><br />    <select id="resultDept" name="resultDept" style="width:150px;" size="12" multiple="true"></select><br />    </td><br />    <td width="5%" align="left"><br />        <input type="button" value="上移" onClick="return turnUp();"/><br />        <br><br />        <br><br />        <input type="button" value="下移" onClick="return turnDown();"/><br />    </td><br />    </tr><br /><tr height="30px"><br /><td align="center" colspan=4><br /><input type="button" name="确认" value="确定" onClick="javascript:ok()"/><br /><input type="button" value="关闭" onClick="javascript:window.close()"/><br /></td><br /></tr><br />    </table><br />  </body><br /></html><br /></div><br />谢谢了，看到了效果，你能把CSS的样式也给我一份吗？谢谢了。

解决方案

这是我曾经用过的一个html，你新建一个html粘进去直接就可以看效果。<html> <head> <title> </title><link href="../../css/index.css" rel="stylesheet" type="text/css" /><link href="../../css/leftmenu.css" rel="stylesheet" type="text/css" /><link href="../../css/css.css" rel="stylesheet" type="text/css" /><link href="../../css/dzkutd.css" rel="stylesheet" type="text/css" /><script language="JavaScript">function LTrim(str){ var whitespace = new String("　 tnr"); var s = new String(str); if (whitespace.indexOf(s.charAt(0)) != -1) { var j=0, i = s.length; while (j < i && whitespace.indexOf(s.charAt(j)) != -1) { j++; } s = s.substring(j, i); } return s;}function GetObjID(ObjName) {for ( var ObjID=0; ObjID < window.deptSelectForm.elements.length; ObjID++ )if (window.deptSelectForm.elements[ObjID].name == ObjName ) {return(ObjID);break;}return(-1);}function AppendItem(allMenu, menu, isAll) {for (j=0; j<document.getElementById(allMenu).length; j++){if (isAll == true || document.getElementById(allMenu).options[j].selected){//GET VALUEdocument.getElementById(allMenu).options[j].selected = false;//GET LENGTHDesLen = document.getElementById(menu).length;// NEW OPTIONdocument.getElementById(menu).options[DesLen] = new Option(LTrim(document.getElementById(allMenu).options[j].text), document.getElementById(allMenu).options[j].value);document.getElementById(allMenu).remove(j);j--;}}}function turnUp() {for (j=0; j<document.getElementById("resultDept").length; j++){if (document.getElementById("resultDept").options[j].selected){if (j == 0) {alert("请从第二个开始选择");return;}//GET VALUEi = j - 1;var obj = document.getElementById("resultDept").options[j];var value = document.getElementById("resultDept").options[i].value;var text = document.getElementById("resultDept").options[i].text;document.getElementById("resultDept").options[i].value = obj.value;document.getElementById("resultDept").options[i].text = obj.text;document.getElementById("resultDept").options[i].selected = true;document.getElementById("resultDept").options[j].value = value;document.getElementById("resultDept").options[j].text = text;document.getElementById("resultDept").options[j].selected = false;}}}function turnDown() {for (j=document.getElementById("resultDept").length-1; j>-1; j--){if (document.getElementById("resultDept").options[j].selected){if(j==document.getElementById("resultDept").length - 1) {alert("请从倒数第二个开始选择");return;}//GET VALUEi = j + 1;var obj = document.getElementById("resultDept").options[j];var value = document.getElementById("resultDept").options[i].value;var text = document.getElementById("resultDept").options[i].text;document.getElementById("resultDept").options[i].value = obj.value;document.getElementById("resultDept").options[i].text = obj.text;document.getElementById("resultDept").options[i].selected = true;document.getElementById("resultDept").options[j].value = value;document.getElementById("resultDept").options[j].text = text;document.getElementById("resultDept").options[j].selected = false;}}}function ok(){window.close();}</script> </head> <body><table width="50%"style="border-right:solid 1px #aaccef; border-bottom:solid 1px #aaccef; border-top:solid 1px #aaccef; border-left:solid 1px #aaccef;" cellpadding="0" cellspacing="0" bgcolor="#f3f8fb" align="center"> <tr height="30px"><td colspan=4><span>项目查询条件</span></td></tr><tr> <td width="20%" align="center"> <select id="initDept" name="initDept" size="12" style="width:150px;" multiple="true"><option value="1">项目状态</option><option value="1">项目名称</option><option value="1">境内外</option><option value="1">所在大区</option><option value="1">所在国家</option><option value="1">建设地区代码</option><option value="1">行业代码</option><option value="1">重点行业</option><option value="1">业务种类</option><option value="1">五级分类</option> </select> </td> <td width="5%" align="center"> <input type="button" value="-->" onClick="return AppendItem('initDept', 'resultDept', false);"/> <br> <input type="button" value="==>" onClick="return AppendItem('initDept', 'resultDept', true);"/> <br> <br> <input type="button" value="<--" onClick="return AppendItem('resultDept', 'initDept', false);"/> <br> <input type="button" value="<==" onClick="return AppendItem('resultDept', 'initDept', true);"/> </td> <td width="20%" align="center"> <select id="resultDept" name="resultDept" style="width:150px;" size="12" multiple="true"></select> </td> <td width="5%" align="left"> <input type="button" value="上移" onClick="return turnUp();"/> <br> <br> <input type="button" value="下移" onClick="return turnDown();"/> </td> </tr><tr height="30px"><td align="center" colspan=4><input type="button" name="确认" value="确定" onClick="javascript:ok()"/><input type="button" value="关闭" onClick="javascript:window.close()"/></td></tr> </table> </body></html>
解决方案二：
这个没什么样式，那上边引入的一些css都没用上，你可以根据你的项目的风格把按钮和背景色该一下就可以了。而且你可能也看到了左右两个装载数据的都是select，当你数据多的时候它会自动有下拉条。
解决方案三：
个人觉得没有必要写那么长的代码，即冗长，又难读难维护用jqmultiselects，使用很简单：例子1：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.multiselects-0.3.js"></script> <script type="text/javascript"> $(function(){// selected：左边下拉框的name// available：右边下拉框的name// (OPTIONAL) adjust the width of the select box to the bigger of the two// 用两个下拉框中的最大宽度来调整下拉框，写法不分左右$("select[name='selected']").selectAdjustWidth("select[name='available']");// 未分配下拉框(左边)事件$("select[name='selected']").multiSelect("select[name='available']");// 已分配下拉框(右边)事件$("select[name='available']").multiSelect("select[name='selected']"); }); </script> </HEAD> <BODY> <table border="0" cellspacing="0" cellpadding="0"><tr><td><div> <select name="selected" size="10" multiple="multiple"><option>1终端厂商1</option><option>2政企客户2</option><option>3客户经理3</option><option>4运营商4</option></select></div></td><td><div> <select name="available" size="10" multiple="multiple"></select></div></td></tr></table> </BODY></HTML>例子2：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.multiselects-0.3.js"></script> <script type="text/javascript"> $(function(){// selected：左边下拉框的name// available：右边下拉框的name// (OPTIONAL) adjust the width of the select box to the bigger of the two// 用两个下拉框中的最大宽度来调整下拉框，写法不分左右$("select[name='selected']").selectAdjustWidth("select[name='available']");// 未分配下拉框(左边)事件$("select[name='selected']").multiSelect("select[name='available']", {trigger: "input[name='add']", // >按钮triggerAll: "input[name='addAll']" // >>按钮});// 已分配下拉框(右边)事件$("select[name='available']").multiSelect("select[name='selected']", {trigger: "input[name='remove']", // <按钮triggerAll: "input[name='removeAll']" // <<按钮}); }); </script> </HEAD> <BODY> <table border="0" cellspacing="0" cellpadding="0"><tr><td><div> <select name="selected" size="10" multiple="multiple"><option>1终端厂商1</option><option>2政企客户2</option><option>3客户经理3</option><option>4运营商4</option></select></div></td><td> <div align="center" style="width:30px"><input name="remove" type="button" class="button addButton" value="<" title="Choose available and add"><br><input name="add" type="button" class="button removeButton" value=">" title="Choose selected and remove"><br><input name="removeAll" type="button" class="button addAllButton" value="<<" title="Add all"><br><input name="addAll" type="button" class="button removeAllButton" value=">>" title="Remove all"></div></td><td><div> <select name="available" size="10" multiple="multiple"></select></div></td></tr></table> </BODY></HTML>
解决方案四：
介绍个好插件：jqmultiselects挺不错的小插件，能满足一般需求1、使用非常简单2、支持Ctrl、Shift连续与不连续选择3、项目地址、示例及说明：http://pure-essence.net/stuff/webTips/dodosPicklist/index.html
解决方案五：
用Jquery，有插件实现这种效果的。不妨看看http://wen2r.iteye.com/blog/497513和http://phf123456-yeah-net.iteye.com/blog/711708
解决方案六：
没做过不过我有个思路一个角色一个div对象，选中的时候，经div的信息用js缓存，确定移动的时候，被移动的框删除div，而曾家那边加一个就行，然后js的缓存指空复杂点的就是捕捉shift键和cltr键的批量操作

时间： 2025-01-20 22:15:30

前台的页面显示，关于左右框内容移动问题

问题描述

解决方案

前台的页面显示，关于左右框内容移动问题的相关文章

从另一页面显示复选框默认选中状态

jsp页面的多选框传递

jsp-JSP,MVC查询外键所在表中的其他内容并放入list中在前台页面显示数据

string-asp.net 页面提示框内容如何写

wordpress判断不同页面显示不同内容的方法

js实现文本框中输入文字页面中div层同步获取文本框内容的方法

js jq-如何实现下拉框点击一个选项，该选项的内容显示在文本框中？

php web 中文乱吗-在linux系统中建立文件夹名为中文的如：”爱提问题“，怎么在web前台页面显示呢，一直乱码

jsp 页面select下拉框显示list问题