在csdn上转载的，作者忘记喽，下次看到在补上
<!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){
for(var i = 0; i < objFrom.options.length;i++){
if(objFrom.options[i].selected == true){
var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(selectItem);
objFrom.options.remove(i);
}
}
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]));
}
}
// -->
</script>
</head>
<body>
<table>
<tr>
<td>Color Code </td>
<td></td>
<td>Sample Order </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>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
要实现“两个select框的数据移动”，我们需要关注以下几个关键知识点： 1. **事件监听**：首先，我们需要在源`<select>`框上监听`change`事件。当用户做出选择时，这个事件会被触发。此外，如果支持多选，还需监听`...
这个场景中，我们讨论的是如何实现一个功能，让用户可以在两个Select下拉框之间移动选择的值，这种功能常见于多选设置或者数据迁移的界面。下面我们将深入探讨如何实现这样的功能。 首先，我们需要两个HTML Select...
本文将深入探讨如何使用jQuery实现两个`<select>`元素之间的`<option>`选项转移操作，包括全选、单选以及删除功能。 首先，我们需要了解`<select>`和`<option>`的基本概念。`<select>`元素用于创建下拉列表，而`...
在网页设计中，有时我们需要实现两个`<select>`下拉框之间的内容互换功能，这在数据操作或者用户交互中可能会很有用。本教程将基于VS2008环境，探讨如何实现这一功能。 首先，我们需要理解`<select>`元素在HTML中的...
总结起来，实现“两个select下拉框中的数据相互移动”涉及到HTML、CSS和JavaScript的基本知识，以及对用户交互的响应和处理。实际开发中还需要根据具体需求进行调整和优化，确保用户体验的流畅和功能的完善。
本文将深入探讨如何使用JavaScript实现两个Select下拉框之间的元素互相移动的功能。这一功能常见于需要动态调整选项归属的情景，例如在多选设置或数据分类中。 首先，我们需要创建两个Select元素，分别命名为`...
js 实现 实现两个select的同步! 值得下载看看!资源免费,大家分享!!
要实现这样的功能，我们首先需要在JSP中设置两个select元素，并用JavaScript绑定事件监听器。当第一个select的值改变时，触发AJAX请求。请求的URL通常是一个后台处理程序，由JSP编写，负责从数据库（这里是MySQL）中...
本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`<select>`元素。它是创建下拉...
根据提供的文件内容，我们可以提炼出以下关于JavaScript实现两个select下拉框选项左移右移的知识点： 1. 通过JavaScript实现两个下拉框间选项的转移是常见的前端技术应用场景。它允许用户通过简单的操作来移动元素...
// 当任意一个select元素的值改变时，触发处理函数 selects.forEach(select => { select.addEventListener('change', () => { // 遍历所有select元素，如果当前改变的不是目标元素，则取消其选中状态 selects....
首先，我们需要创建两个Select控件，分别代表省份和城市。HTML代码可能如下： ```html <select id="province" name="province" onchange="loadCities(this.value)"> <!-- 省份选项 --> </select> <select id=...
本项目中，我们看到一个创新的应用，即通过两个`<select>`标签来实现类似“双选框”的功能，这在需要用户从多个选项中选择并分配到不同类别时非常有用。这种设计可以提高用户界面的交互性和效率。 首先，我们要理解...
在本文中，我们将深入探讨如何实现两个`select`元素之间的多选选项相互移动的功能，以及相关的JavaScript代码示例。在Web开发中，这样的功能常见于用户需要在多个选项中进行选择并分配的情况，例如角色分配或者分类...
在网页设计中，"select互选效果"是一种交互设计特性，允许用户在两个或多个下拉选择框（`<select>`元素）之间进行双向选择，实现数据的同步更新。这样的功能常见于需要关联两个列表项的场景，比如地区选择、类别筛选...
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被...
而在实际应用中，有时候需要实现两个select控件之间选项的动态移动，即用户可以将一个控件中的选项移动到另一个控件中，或者反之。这种功能通过纯JavaScript实现较为繁琐，而借助jQuery库则可以大大简化代码，提升...
两个相关联的select，一个select的选择会影响另一个select的输出结果
以上代码中，`e.preventDefault()`用于防止页面刷新，然后我们通过jQuery遍历两个Select框中的选中项，将值添加到数组`selectedValues`中。最后，这些值可以发送到服务器进行处理。 总结一下，本文介绍了如何使用...