选择左边多选框的值移动到右边多选框

最新推荐文章于 2021-02-25 02:16:17 发布

li243306411

最新推荐文章于 2021-02-25 02:16:17 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/li243306411/article/details/45969031

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据库表管理-数据库表编辑</title>
<%@ include file="../../common/pubInclude.jsp"%>
<style type="text/css">
#main {
height: 500px;
padding-top: 50px;
text-align: center;
}
#fullbg {
background-color: gray;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
z-index: 3;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

#dialog {
background-color: #fff;
border: 5px solid rgba(0, 0, 0, 0.4);
height: 400px;
left: 50%;
margin: -200px 0 0 -200px;
padding: 1px;
position: fixed !important; /* 浮动对话框 */
position: absolute;
top: 50%;
width: 500px;
z-index: 5;
border-radius: 5px;
display: none;
}

#dialog p {
margin: 0 0 12px;
height: 24px;
line-height: 24px;
background: #CCCCCC;
}

#dialog p.close {
text-align: right;
padding-right: 10px;
}

#dialog p.close a {
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript" src="<%=base%>/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*
移动select的部分内容，必须存在value,此函数以value为标准进行移动
oSourceSel：源列表框对象
oTargetSel：目的列表框对象
*/

//左到右移动
function moveSelected(oSourceSel, oTargetSel){
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();
//此数组存储选中的options，以value来应对
var arrValueTextRelation = new Array();
var index = 0; //用来辅助建立缓存数组

//存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
for(var i = 0; i < oSourceSel.options.length; i++){
if(oSourceSel.options[i].selected){
arrSelValue[index] = oSourceSel.options[i].value;
arrSelText[index] = oSourceSel.options[i].text;
//建立value和选中option的对应关系
arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
index++;
}
}

//增加缓存的数据到目的列表框中，并删除源列表框中的对应项
for(var i = 0; i < arrSelText.length; i++){
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);

//删除源列表框中的对应项
oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
}
}

//右到左移动
function removeSelected(oSourceSel, oTargetSel){
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();
//此数组存储选中的options，以value来应对
var arrValueTextRelation = new Array();
var index = 0; //用来辅助建立缓存数组

//存储目的列表框中所有的数据到缓存中，并建立value和选中option的对应关系
for(var i = 0; i < oTargetSel.options.length; i++){
if(oTargetSel.options[i].selected){
arrSelValue[index] = oTargetSel.options[i].value;
arrSelText[index] = oTargetSel.options[i].text;
//建立value和选中option的对应关系
arrValueTextRelation[arrSelValue[index]] = oTargetSel.options[i];
index++;
}
}

//增加缓存的数据到源列表框中，并删除目的列表框中的对应项
for(var i = 0; i < arrSelText.length; i++){
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oSourceSel.add(oOption);
//删除目的列表框中的对应项
oTargetSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
}
}

//左到右全部移动
function moveAll(oSourceSel, oTargetSel){
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();

//存储所有源列表框数据到缓存数组
for(var i = 0; i < oSourceSel.options.length; i++){
arrSelValue[i] = oSourceSel.options[i].value;
arrSelText[i] = oSourceSel.options[i].text;
}

//将缓存数组的数据增加到目的select中
for(var i = 0; i < arrSelText.length; i++){
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);
}

//清空源列表框数据，完成移动
oSourceSel.innerHTML = "";
}

//右到左全部移动
function removeAll(oSourceSel, oTargetSel){
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();

//存储所有目的列表框数据到缓存数组
for(var i = 0; i < oTargetSel.options.length; i++){
arrSelValue[i] = oTargetSel.options[i].value;
arrSelText[i] = oTargetSel.options[i].text;
}

//将缓存数组的数据增加到源select中
for(var i = 0; i < arrSelText.length; i++){
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oSourceSel.add(oOption);
}

//清空目的列表框数据，完成移动
oTargetSel.innerHTML = "";
}

//获取右边已选框的所有值
function getValue(){
var list = document.getElementById("selId2").options;
var str = "";
for(var i = 0; i < list.length; i++){
if(i==(list.length-1)){
str += list[i].value;
break;
}
str += list[i].value +",";
}
document.getElementById("id").value=str;
closeBg();
}

function showSelect(){
document.getElementById("selectId").style.display='block';
}

//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
display : "block"
});
$("#dialog").show();
}

//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<div id="main">
<div id="fullbg"></div>
<input type="text" id="id" value="" οnclick="showBg();showSelect();" style="width: 190px;">
<div id="dialog">
<p class="close">
<a href="#" οnclick="closeBg();">关闭</a>
</p>
<div>
<table cellspacing="1" width="400px" align="center" border="0">
<tr style="display: none;" id="selectId">
<td>
<select name="left" size="8" multiple style="width:190px; height: 210px;" id="selId1"
οndblclick="moveSelected(document.all.left,document.all.right)">
<option value="id">id</option>
<option value="name">name</option>
<option value="pwd">pwd</option>
<option value="aaa">aaa</option>
<option value="aaa">aaa</option>
<option value="aaa">aaa</option>
<option value="aaa">aaa</option>
</select>
</td>
<td align="center">
<input type="button" value="确定" οnclick="getValue()"><br><br>
<input type="button" value=" > " οnclick="moveSelected(document.all.left,document.all.right)"><br><br>
<input type="button" value=" > > " οnclick="moveAll(document.all.left,document.all.right)"><br><br>
<input type="button" value=" < " οnclick="removeSelected(document.all.left,document.all.right)"><br><br>
<input type="button" value=" < < " οnclick="removeAll(document.all.left,document.all.right)">
</td>
<td>
<select name="right" size="8" multiple style="width:190px; height: 210px;" id="selId2"></select>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

li243306411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择左边多选框的值移动到右边多选框

pageEncoding="UTF-8"%>数据库表管理-数据库表编辑/css/fileuploadstyles.css">/css/bootstrap-datetimepicker.min.css" media="screen">/js/createdom.js">/js/jquery.Jcrop.min.js">/* 移动select的部分
复制链接

扫一扫