<!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内容也可左右移动，支持单选移动、多选移动和一键全部移动！
在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的select选择框，该功能允许用户将选项在两个select元素之间进行左右移动、添加和删除。这个功能在数据管理、选项筛选或用户自定义设置等场景中非常有用...
在本文中，我们将深入探讨如何使用JavaScript实现下拉框（Select元素）内容的左右移动效果。这个效果通常用于用户界面中，让用户能够方便地在两个下拉框之间转移选项，例如选择并添加或移除项目。我们将分析提供的...
5. `$("#select1").dblclick` 和 `$("#select2").dblclick`: 这两个事件监听器分别对应左右两侧Select的双击事件。双击一个选项，该选项会被移动到另一侧的Select。 这个实现的关键在于使用jQuery的`appendTo()`...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
本篇文章将详细讲解如何用JavaScript实现这样的功能，并且支持上下移动已选择的选项。 首先，来看一下HTML部分，它包含了两个`<select>`元素，一个代表左边列表（list1），另一个代表右边列表（list2）。每个`...
根据提供的文件信息，本文将详细解析“jquery左右选择框”的实现原理、代码结构及功能特点。此案例展示了如何使用jQuery库来实现一个简单的左右选择框交互功能，这在实际项目中非常常见，例如用户权限分配、多选项...
本文将深入探讨如何实现一个功能，即将下拉列表`select`中的选中项从左侧框移动到右侧框的示例，并讨论与之相关的JavaScript技术和事件处理。 首先，我们需要理解`select`元素的基本结构。在HTML中，`<select>`标签...
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现一个功能，即控制下拉列表中的左右选择。这个功能在很多场景中都很有用，比如在分类管理中编辑商品信息时，用户可以方便地将商品从一个分类移动到另一个。...
在IT领域，USB移动硬盘是常见的数据存储和传输设备，然而有时用户会遇到“usb移动硬盘被屏蔽或不显示”的问题。这个问题可能由多种因素引起，包括系统设置、硬件故障、驱动程序问题以及病毒攻击等。下面我们将深入...
在示例中，虽然没有直接展示左右移动的代码，但我们可以推断，通过在相应的点击事件处理函数中使用`.appendTo()`，可以实现把某个元素（例如下拉列表中的选项）从一个`<select>`元素移动到另一个`<select>`元素中。...
以上代码实现了描述中的效果，即： 1. 第一个列表的双击操作将选中的条目添加到第二个列表。 2. 第二个列表的双击操作将选中的条目移回到第一个列表。 3. 点击“添加”按钮将第一个列表中选中的所有条目添加到第二个...
为了完成这一目标，我们将介绍代码的关键部分，代码的执行流程以及其中涉及的函数和方法。OpenCV（Open Source Computer Vision Library）是一个开源的计算机视觉和机器学习软件库，它包含了大量的图像处理功能，...
用户可以通过双击将选择的选项从一个列表移动到另一个列表，实现类似文本域的交互效果。这种功能对于数据筛选、过滤或者用户自定义选择等场景非常实用。 为了实现这个功能，开发者使用了jQuery库，这是一个广泛使用...
上述代码提供了一个基本的实现方式，通过`<select>`元素的`ondblclick`事件监听用户双击选择，以及通过按钮点击触发内容交换。下面我们将详细解释这段代码的工作原理和涉及的知识点。 1. **函数定义**： 函数`move...
在 Excel 中，select 语句可以使用 VBA 代码来实现。 十四、报表（有层次） * 报表的概念和应用 * VBA 代码实现报表的示例 知识点：报表是指对数据进行汇总和分析，以便生成报表。在 Excel 中，报表可以使用 VBA ...
3. `moveToLeft(select1, select2)`：与 `moveToRight` 相反，这个函数将 `select2` 中选中的选项移动回 `select1`，同时从 `select2` 中移除。 4. `moveAllToLeft(select1, select2)`：这个函数将 `select2` 中的...