<!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=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript"><!--
function addItem(objFrom,objTo){
var flag = false;
for(var i = 0; i < objFrom.options.length;i++){
if(objFrom.options[i].selected == true){
flag = true;
var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(selectItem);
objFrom.options.remove(i);
}
}
if(!flag){alert("please select a Item");}
sortItem(objTo);
}
function allAddItem(objFrom,objTo){
for(var i = objFrom.options.length - 1;i>=0;i--){
var objItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(objItem);
objFrom.options.remove(i);
}
sortItem(objTo);
}
function sortItem(objTo){
var ln = objTo.options.length;
var arrText = new Array();
var arrValue = new Array();
for(var i=0;i<ln;i++){
arrText[i] = objTo.options[i].text;
}
arrText.sort();
for(var i=0;i<ln;i++){
for(var j = 0;j<objTo.options.length;j++){
if(arrText[i] == objTo.options[j].text){
arrValue[i] = objTo.options[j].value;
break;
}
}
}
while(ln--){
objTo.options[ln] = null;
}
for(i = 0;i<arrText.length;i++){
objTo.add(new Option(arrText[i],arrValue[i]));
}
}
function swapItem(option1,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;
}
function moveUp(selectObj){
var obj = selectObj.options;
for(var i = 1;i<obj.length;i++){
if(obj[i].selected && !obj[i-1].selected){
swapItem(obj[i],obj[i-1]);
}
}
}
function moveDown(selectObj){
var obj = selectObj.options;
for(var i = obj.length -2;i>-1;i--){
if(obj[i].selected && !obj[i+1].selected){
swapItem(obj[i],obj[i+1]);
}
}
}
function moveToTop(selectObj){
var obj = selectObj.options;
var oOption = null;
for(var i = 0;i<obj.length;i++){
if(obj[i].selected && oOption){
selectObj.insertBefore(obj[i],oOption);
}else if(!oOption && !obj[i].selected){
oOption = obj[i];
}
}
}
function moveToBottom(selectObj){
var obj = selectObj.options;
var oOption = null;
for(var i = obj.length-1;i> -1;i--){
if(obj[i].selected){
if(oOption){
oOption = selectObj.insertBefore(obj[i],oOption);
}else{
oOption = selectObj.appendChild(obj[i]);
}
}
}
}
// --></script>
</head>
<body>
<table>
<tr>
<td>Color Code </td>
<td></td>
<td>Sample Order </td>
<td></td>
</tr>
<tr>
<td>
<select id="selectColor" multiple="multiple" style="width:200px;height:200px;">
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="DK-RS">DARK RINSE</option>
<option value="DK-SW">DARK STONEWASH</option>
<option value="Green">Green</option>
<option value="MD-SL">MED SANDBLAST</option>
<option value="MD-SW">MED STONEWASH</option>
<option value="NA">Not applicable</option>
<option value="Yellow">Yellow</option>
<option value="Red">Red</option>
</select>
</td>
<td>
<table>
<tr>
<td><input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/></td>
</tr>
<tr>
<td><input type="button" id="btn4" value="<- " onclick="addItem(selectSo,selectColor)"/></td>
</tr>
</table>
</td>
<td>
<select id="selectSo" multiple="multiple" style="width:200px;height:200px;">
</select>
</td>
<td>
<table>
<tr>
<td><input type="button" id="btn5" value="AA" onclick="moveToTop(selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn6" value="A" onclick="moveUp(selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn7" value="V" onclick="moveDown(selectSo)"/></td>
</tr>
<tr>
</tr>
<td><input type="button" id="btn8" value="VV" onclick="moveToBottom(selectSo)"/></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript"><!--
document.getElementById("selectColor").ondblclick = function(){
addItem(selectColor,selectSo);
};
document.getElementById("selectSo").ondblclick = function(){
addItem(selectSo,selectColor);
};
// --></script>
</body>
</html>
分享到：
相关推荐
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！ 运行效果图：...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
双击也可以移动 [1].[代码] [removed] $(function(){ //移到右边 $("#add").click(function(){ //获取选中的选项，删除并追加给对方 $("#select1 option:selected").appendTo("#select2"); }); //移到左边 $("#...
VC ListBox左右交换选择数据，前几年在一些WEB页面中，也经常看到的效果，网页上叫做Select下拉框，也可做成左右双击选择数据，将列表项内容从左边移动到右边，再从右边移除到左边，类似实现数据选择的功能，本例是...
鼠标移动时，标签跟随移动，与当前hover项对齐 自动宽度 多个选择纵向划分，宽度应该保持一致，包括label和options外部配置 单击页面上非当前选择控件处收起选项双击才收起，防止误触？ css变量撤消 展开/收起，...
Android Design Preview（简称ADP）是一款在 Android 设备上实时查看设计效果的免费软件。 【安装说明】 ※ Windows用户 1. 直接双击打开 AndroidDesignPreview-0.3.1.jar 2. 通过 USB 连接电脑和 Android 设备...
15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 ...
15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 ...
（对线要素进行标注时，如果标注在线上，标注和线会叠加显示，效果不理想，下面叫介绍一种可以在显示标注的地方把线断开的方法，这样效果会美观一些） 操作步骤： 1）．把标注转成注记，保存在GDB中 2）． 用...
使用microsoft.web.ui.webcontrols的TabStrip与IFame组件,达到页的切换效果 HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可! 服务器自定义开发二之客户端脚本回发 Web...
对贴片元件的焊盘用绘图工具中的焊盘工具放置焊盘，然后双击焊盘，在对话框将Saple(形状)中的下拉单修改为Rectangle（方形）焊盘，同时调整焊盘大小X-Size和Y-Size为合适的尺寸，将Layer(层)修改到“Toplayer”...
16.lash能将ASCII代码转换成对应的字符，也可以返回字符对应的ASCII码。Chr表示什么？ A. 转换ASCII码为字符 B. 转换字符为ASCII码 C. 转换字符为海明码 D. 转换海明码为字符 17.Flash 菜单File→Print的快捷...
要安装，双击任何 .sketchplugin 文件，草图会将它们放在菜单项“插件”下。 提示：在“系统偏好设置”>“键盘”>“快捷方式”>“应用程序快捷方式”中为 Sketch 中的任何菜单项设置键盘快捷方式。 选择下一个画板...
用鼠标左键双击等同于粘贴功能！！而且在编辑播放列表窗口中，完全支持多选（shift—连续多选 ctrl—跳跃多选）而且完全支持多选移动、删除等功能！！！在此提示！！ 此压缩包中已经包含《浩海网络多格式播放器》的...
6,可读取本地、局域网和网络三部分歌曲合成一张列表播放 7,URL输入窗口增加面向使用用户的制定选择播放控件的功能 8,列表播放拥有三循环状态 9，生成的播放列表还可以进行后续的上下移动、删除和添加操作 ...
OceanX采用了与浩海播放器V3.941相同的核心因此主要的引擎更新都是一致的:)OceanX播放器特点：1，随意的页面拖动效果让您的网站和播放器的使用就像桌面程序一样的效果！2，播放器嵌入效果和弹出效果任意选择让你更显...