前一段时间整理了一个js,主要是用来操作两个select表单的option节点相互移动，及置顶置地 向上向下移动
1.js代码
/**
* @功能 select左右移动实现js
* @作者 md_java
* @时间 2010-6-20
*/
var fromsob,toobj,froms,arry,nowIndex,newoption;
/**
* @功能 分批添加或删除
* @输入 formselect 要移动的select;toselect 要移给的select,postionstr 移动指向left OR right
* @返回 无
*/
function moveoption(formselect,toselect,postionstr){
fromsobj=document.getElementById(formselect);
toobj=document.getElementById(toselect);
if(postionstr=='left'&&fromsobj.options.length==0){//判断是否还有权限
alert('left is empty');
return;
}else if(postionstr=='right'&&fromsobj.options.length==0){//判断是否还有权限
alert('right is empty');
return;
}
if(postionstr=='left'&&fromsobj.options.selectedIndex==-1){//判断是否选中
alert('please choose left');
return;
}else if(postionstr=='right'&&fromsobj.options.selectedIndex==-1){//判断是否选中
alert('please choose right');
return;
}
froms=fromsobj.options;//获得要移动select的opations
arry=new Array();
var arr=0;
for(var i=0;i<froms.length;i++){
if(froms[i].selected==true){
nowIndex = toobj.options.length; //获取将要移动到toselect的options长度
newoption = new Option(froms[i].text, froms[i].value,false,false);//copy option
toobj.options[nowIndex] = newoption;
fromsobj
arry[arr]=froms[i];//将选中对象缓存如数组 等下删除
arr++;
}
}
//删除已被移动的option
for(var a=0;a<arry.length;a++){
fromsobj.options[arry[a].index]=null;
}
}
/**
* @功能 整体移动option全部添加或全部删除
* @输入 formselect 要移动的select;toselect 要移给的select,postionstr 移动指向left OR right
* @返回 无
*/
function giveOrUndoAll(formselect,toselect,postionstr){
fromsobj=document.getElementById(formselect);
toobj=document.getElementById(toselect);
if(postionstr=='left'&&fromsobj.options.length==0){
alert('left is empty');
return;
}
if(postionstr=='right'&&fromsobj.options.length==0){
alert('right is empty');
return;
}
froms=fromsobj.options;
for(var i=0;i<froms.length;i++){
nowIndex = toobj.options.length;
newoption = new Option(froms[i].text, froms[i].value,false,false);
toobj.options[nowIndex] = newoption;
}
fromsobj.innerHTML=null;
}
/**单元素向底部移动*/
function mTop(sid){
selectRight=document.getElementById(sid);
var i = selectRight.options.selectedIndex;
if(i > 0){
Temp_Text=selectRight.options(i).text;
Temp_ID=selectRight.options(i).value;
for(j=i;j>0;j--){
selectRight.options(j).text=selectRight.options(j-1).text;
selectRight.options(j).value=selectRight.options(j-1).value;
}
selectRight.options(0).value=Temp_ID;
selectRight.options(0).text=Temp_Text;
selectRight.selectedIndex=0;
}
}
/**单元素向上移动*/
function mUp(sid){
selectRight=document.getElementById(sid);
var i = selectRight.options.selectedIndex;
var j = i-1
if(i>0){
Temp_Text = selectRight.options(j).text;
Temp_ID = selectRight.options(j).value;
selectRight.options(j).text = selectRight.options(i).text;
selectRight.options(j).value = selectRight.options(i).value;
selectRight.options(i).text = Temp_Text;
selectRight.options(i).value = Temp_ID;
selectRight.selectedIndex=j;
}
}
/**单元素向下移动*/
function mDown(sid){
selectRight=document.getElementById(sid);
var i = selectRight.options.selectedIndex;
if (i != selectRight.length-1){
var j = i+1;
if(i < selectRight.length){
Temp_Text = selectRight.options(j).text;
Temp_ID = selectRight.options(j).value;
selectRight.options(j).text = selectRight.options(i).text;
selectRight.options(j).value = selectRight.options(i).value;
selectRight.options(i).text = Temp_Text;
selectRight.options(i).value = Temp_ID;
selectRight.selectedIndex=j;
}
}
}
/**单元素向底部移动*/
function mBottom(sid){
selectRight=document.getElementById(sid);
var i = selectRight.selectedIndex;
var j = selectRight.length-1
if(i < j){
Temp_Text = selectRight.options(i).text;
Temp_ID = selectRight.options(i).value;
for(var k=i+1;k<=j;k++){
selectRight.options(k-1).text=selectRight.options(k).text;
selectRight.options(k-1).value=selectRight.options(k).value;
}
selectRight.options(j).text=Temp_Text;
selectRight.options(j).value=Temp_ID;
selectRight.selectedIndex=j;
}
}
2.html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MOVE SELECT</title>
<script type="text/javascript" src="opationSelect.js"></script>
<style type="text/css">
<!--
.STYLE3 {
font-size: 14px;
font-weight: bold;
}
li{text-align:center}
input{text-align:center;width:80px}
-->
</style>
<script type="text/javascript">
function checkSub(){
var Vs=document.getElementById("rselect").options;
var str="you want move:\n";
for(var i=0;i<Vs.length;i++){
Vs[i].selected=true;
str=str+"\n"+Vs[i].text;
}
alert(str);
return false;
}
</script>
</head>
<body>
<form action="" method="post" id="form1">
<table width="100%" border="1" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="18" colspan="2" align="center"
style="padding-bottom: 20px">
<span class="STYLE3">MOVE SELECT</span>
</td>
</tr>
<tr>
<td height="35" >
<table border="1" cellpadding="0" align="center" cellspacing="0" >
<tr align="center">
<th>
left
</th>
<th>
MOVE
</th>
<th>
right
</th>
</tr>
<tr>
<td>
<select multiple="multiple"
style="height: 200px; width: 120px" id="lselect">
<option value="1">
opation1
</option>
<option value="2">
opation2
</option>
<option value="3">
opation3
</option>
<option value="4">
opation4
</option>
<option value="5">
opation5
</option>
<option value="6">
opation6
</option>
</select>
</td>
<td align="left">
<ul style="list-style:none;margin:0px; padding:0px;">
<li><input type="button" value="toTop" onclick="mTop('rselect');" /></li>
<li><input type="button" value="toUp" onclick="mUp('rselect');" /></li>
<li><input type="button" value="toLeftAll" onclick="giveOrUndoAll('lselect','rselect','left');" />
</li>
<li><input type="button" value="toLeft" onclick="moveoption('lselect','rselect','left');" />
</li>
<li><input type="button" value="toRight" onclick="moveoption('rselect','lselect','right');" /></li>
<li><input type="button" value="toRightAll" onclick="giveOrUndoAll('rselect','lselect','right');" /></li>
<li><input type="button" value="toDown" onclick="mDown('rselect');" /></li>
<li><input type="button" value="toButtom" onclick="mBottom('rselect');" /></li>
</ul>
</td>
<td>
<select multiple="multiple"
style="height: 200px; width: 120px" id="rselect">
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" align="center">
<input value="submit" type="button" onclick="checkSub();" />
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
本主题聚焦于如何实现`select`选择框内容的左右移动功能，这是一种增强用户体验的方式，尤其适用于需要用户在多个选项间频繁切换的场景。下面将详细探讨这一功能的实现原理、技术栈以及相关的编程知识点。 1. **...
js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效
这个项目是关于如何实现一个功能，使得在HTML `<select>` 元素中的 `<option>` 选项能够通过左右、上下移动来改变它们的顺序。这个特性对于创建具有可定制排序的列表非常有用，比如在编辑模式下，用户可以根据自己的...
当需要对这些选项进行动态排序，比如允许用户通过上下移动来调整选项的顺序时，就需要用到“select框上下移动排序”的技术。这个功能在很多应用场景中都很常见，比如任务管理、优先级设置等，它可以提升用户的交互...
以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明： 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现，检查每个选项的`...
在JavaScript编程中，创建具有左右两个下拉选择框并实现左右上下移动功能是一个常见的交互设计。这个功能常常用于用户在两个列表之间转移选项，比如在“可用”和“已选”之间切换。以下是对这个主题的详细解释： ...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能，即在两个...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
### Js操作Select大全知识点详解 #### 一、概述 JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`...
JavaScript Select和Option列表元素上下左右移动 在这个资源中，我们将要讨论如何使用 JavaScript 实现 Select 和 Option 列表元素的上下左右移动功能。这个功能支持一次选中多项在左右列表中来回移动，非常适合在...
`select2.min.js`是JavaScript文件的最小化版本，用于减少页面加载时间；而`select2.min.css`则是CSS文件的最小化版本，负责样式呈现。这两个文件应当在HTML页面中正确引用，以便Select2库正常工作。 在实际应用中...
<title>.NET页面实现表格上下左右移动光标 <script src="js/main.js"> <!-- 表格内容 --> ``` 接下来，我们需要编写JavaScript代码来处理光标移动和文本选择。这里我们将创建一个名为`main.js`的外部...
在这个教程中，我们将探讨如何使用JavaScript实现对HTML select元素中option项进行上下移动的功能。 首先，要实现select中的option上下移动，我们需要理解select和option元素的DOM接口。select元素通过options属性...
在HTML和JavaScript编程中，`<select>`元素用于创建下拉列表，经常需要进行动态操作，比如添加、删除、修改选项，以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能，并判断控件是否存在。...
总结起来，`js`加载`select`项是一项基础的前端技术，而`JSelect`则通过JavaScript为`select`元素提供了丰富的自定义样式和交互功能，极大地提升了用户体验。在实际项目中，结合这两者可以构建出既实用又美观的下拉...
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
然而，有时为了实现更复杂的功能或者更好的视觉效果，开发者可能会选择使用JavaScript来模拟`<select>`下拉菜单。这种方法可以提供更多的自定义选项，如动画效果、多级下拉、异步加载等。 ### 1. 常规HTML `<select...