左右移动进行选取

最新推荐文章于 2024-08-26 20:25:07 发布

hlf48641715

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量537

点赞数

分类专栏： js 文章标签： button function input javascript null 测试

本文链接：https://blog.csdn.net/hlf48641715/article/details/4140810

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货 </title>
</head>
<body >

<div style="font-size:10pt;">
注1：左右移动进行选取 <br/>
注2：已解决的问题 <br/>
----能进行多行排序 <br/>
----解决排序时滚动条归零的问题 <br/>
<br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：作者JK： <a href="mailTo:jk_10000@yahoo.com.cn?subject=About%20MoveRightOrLeft">JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>

<form name=frm>

<table>
<tr >
<td>
<select name=SrcSelect size=6 style="height:160px;width:200px;" multiple οndblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)">
<option value="1">test1 </option>
<option value="2">test2 </option>
<option value="3">test3 </option>
<option value="4">test4 </option>
<option value="5">test5 </option>
<option value="6">test6 </option>
<option value="7">test7 </option>
<option value="8">test8 </option>
<option value="9">test9 abcde abcde abcde abcde abcde abcde abcde abcde </option>
</select>
</td>
<td width="30px">
<input align="left" type=button value=">>" οnclick="moveLeftOrRightAll(document.frm.SrcSelect,document.frm.ObjSelect)" > <br> <br>
<input align="left" type=button value=">" οnclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)" > <br> <br>
<input align="left" type=button value=" <" οnclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)" > <br> <br>
<input align="left" type=button value=" < <" οnclick="moveLeftOrRightAll(document.frm.ObjSelect,document.frm.SrcSelect)" >
</td>
<td>
<select name=ObjSelect size=6 style="height:160px;width:200px;" multiple οndblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)">
<option value="11">test11 </option>
<option value="12">test12 </option>
<option value="13">test13 </option>
<option value="14">test14 </option>
<option value="15">test15 </option>
<option value="16">test16 </option>
</select>
</td>
<td width="30px">
<input type=button value="AA" οnclick="moveToTop(document.frm.ObjSelect)" > <br> <br>
<input type=button value="A" οnclick="moveUp(document.frm.ObjSelect)" > <br> <br>
<input type=button value="V" οnclick="moveDown(document.frm.ObjSelect)" > <br> <br>
<input type=button value="VV" οnclick="moveToBottom(document.frm.ObjSelect)" >

</td>
</tr>
</table>

</form>
</body>

<script language=javascript srccccc="CommonJS_SwapOption.js">

function moveLeftOrRight(fromObj,toObj)
{
var fromObjOptions=fromObj.options;
for(var i=0;i <fromObjOptions.length;i++){
if(fromObjOptions[i].selected){
toObj.appendChild(fromObjOptions[i]);
i--;
}
}
}

function moveLeftOrRightAll(fromObj,toObj)
{
var fromObjOptions=fromObj.options;
if(fromObjOptions.length>1000) {
//if(!confirm("Are you sure to move options?")) return false;
}
for(var i=0;i <fromObjOptions.length;i++){
fromObjOptions[0].selected=true;
toObj.appendChild(fromObjOptions[i]);
i--;
}
}

function moveUp(selectObj)
{
var theObjOptions=selectObj.options;
for(var i=1;i <theObjOptions.length;i++) {
if( theObjOptions[i].selected && !theObjOptions[i-1].selected ) {
swapOptionProperties(theObjOptions[i],theObjOptions[i-1]);
}
}
}

function moveDown(selectObj)
{
var theObjOptions=selectObj.options;
for(var i=theObjOptions.length-2;i>-1;i--) {
if( theObjOptions[i].selected && !theObjOptions[i+1].selected ) {
swapOptionProperties(theObjOptions[i],theObjOptions[i+1]);
}
}
}

function moveToTop(selectObj){
var theObjOptions=selectObj.options;
var oOption=null;
for(var i=0;i <theObjOptions.length;i++) {
if( theObjOptions[i].selected && oOption) {
selectObj.insertBefore(theObjOptions[i],oOption);
}
else if(!oOption && !theObjOptions[i].selected) {
oOption=theObjOptions[i];
}
}
}

function moveToBottom(selectObj){
var theObjOptions=selectObj.options;
var oOption=null;
for(var i=theObjOptions.length-1;i>-1;i--) {
if( theObjOptions[i].selected ) {
if(oOption) {
oOption=selectObj.insertBefore(theObjOptions[i],oOption);
}
else oOption=selectObj.appendChild(theObjOptions[i]);
}
}

}

function selectAllOption(selectObj){
var theObjOptions=selectObj.options;
for(var i=0;i <theObjOptions.length;i++){
theObjOptions[0].selected=true;
}
}

/* private function */
function swapOptionProperties(option1,option2){
//option1.swapNode(option2);
var tempStr=option1.value;
option1.value=option2.value;
option2.value=tempStr;
tempStr=option1.text;
option1.text=option2.text;
option2.text=tempStr;
tempStr=option1.selected;
option1.selected=option2.selected;
option2.selected=tempStr;
}
</script>

hlf48641715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右移动进行选取

JK:支持民族工业,尽量少买X货注1：左右移动进行选取注2：已解决的问题 ----能进行多行排序 ----解决排序时滚动条归零的问题注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。注-----：作者JK： JK_10000@yahoo.com.cn test1 test2
复制链接

扫一扫

专栏目录