<html>
<head>
<title>test.html</title>
<script type="text/javascript">
function addItem(sour,dest){
if(sour.selectedIndex==-1){
return;
}
var sourText = sour.options[sour.selectedIndex].text;
var sourValue = sour.options[sour.selectedIndex].value;
dest.options.add(new Option(sourText,sourValue));
sour.options.remove(sour.selectedIndex);
}
function addItemAll(sour,dest){
if(sour.length==-1){
return;
}
for(var i=0;i<sour.length;i++){
var sourText = sour.options[i].text;
var sourValue = sour.options[i].value;
dest.options.add(new Option(sourText,sourValue));
}
var k=0;
while((k = sour.length-1)>=0){
sour.options.remove(k);
}
}
</script>
</head>
<body>
<form name="from1" action="action1">
<table name="table1">
<tr>
<td>
可用：<br>
<select name="leftSelect" multiple="multiple" style="width:300px;heigth:300px;" ondblclick="addItem(leftSelect,rightSelect)">
<option value="loption1" >101项</option>
<option value="loption2" >102项</option>
<option value="loption3" >103项</option>
<option value="loption4" >104项</option>
<option value="loption5" >105项</option>
</select>
</td>
<td>
<input name="addButton" type="button" value="添加>>" onclick="addItem(leftSelect,rightSelect)"/>
<br>
<input name="addAll" type="button" value="全部添加>>" onclick="addItemAll(leftSelect,rightSelect)"/>
<br>
<input name="removeButton" type ="button" value="移出" onclick="addItem(rightSelect,leftSelect)"/>
<br>
<input name="reMoveAll" type="button" value="全部移除" onclick="addItemAll(rightSelect,leftSelect)"/>
</td>
<td>
现有:<br>
<select name="rightSelect" multiple="multiple" style="width:300px;heigth:300px;" ondblclick="addItem(rightSelect,leftSelect)">
<option value="roption1" >96项</option>
<option value="roption2" >97项</option>
<option value="roption3" >98项</option>
<option value="roption4" >99项</option>
<option value="roption5" >100项</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
本主题聚焦于如何实现`select`选择框内容的左右移动功能，这是一种增强用户体验的方式，尤其适用于需要用户在多个选项间频繁切换的场景。下面将详细探讨这一功能的实现原理、技术栈以及相关的编程知识点。 1. **...
这个项目是关于如何实现一个功能，使得在HTML `<select>` 元素中的 `<option>` 选项能够通过左右、上下移动来改变它们的顺序。这个特性对于创建具有可定制排序的列表非常有用，比如在编辑模式下，用户可以根据自己的...
Select权限是数据库中最基本的权限，允许用户查询数据库中的数据。在Oracle数据库中，赋予select权限需要使用GRANT语句。例如，赋予cc551it用户select权限，可以使用以下语句： ```sql GRANT SELECT ON newccs.TABLE...
至此，我们已经实现了所需的功能：用户可以选中左侧 select 中的项目，点击按钮后，选中的项目会移动到右侧的 select 中。请注意，这里假设您已经引入了 jQuery，如果您的压缩包中没有包含 jQuery，您需要自行从 ...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
通过这种方式，Bootstrap左右多选多Multiselect插件能够灵活地融入到各种项目中，提升用户体验。 总之，Bootstrap Multiselect插件是一个强大的工具，它使得在Web应用中实现复杂的多选交互变得简单而直观，无论是...
当需要实现两个`select`下拉框之间的数据交互，比如从一个框移入选项到另一个框，这种功能常见于数据分类、角色分配或者权限设置等场景。本篇文章将详细讲解如何实现这样的交互功能。 首先，我们需要创建两个`...
在某些交互式应用中，我们可能需要实现一个功能，让用户能够从一个`<select>`框（通常称为“源”或“左侧”框）选择一个或多个选项，然后将这些选项移动到另一个`<select>`框（“目标”或“右侧”框）。这种操作常见...
用户可以选择其中一个Select中的选项，并将其移动到另一个Select中。为了实现这个交互，我们可以监听Select元素的`change`事件，当用户做出选择时触发相应的操作。 ```html <select id="selectLeft" multiple> ...
在网页设计中，`<select>`元素用于创建下拉列表，常常用于提供多个选项供用户选择。当需要对这些选项进行动态排序，比如允许用户通过上下移动来调整选项的顺序时，就需要用到“select框上下移动排序”的技术。这个...
在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的select选择框，该功能允许用户将选项在两个select元素之间进行左右移动、添加和删除。这个功能在数据管理、选项筛选或用户自定义设置等场景中非常有用...
处理option的移动事件，很多人不知道的option的移动事件怎么处理。
使用此类插件时，开发者需要将插件的CSS和JS文件引入到项目中，然后通过jQuery选择器找到需要替换的`<select>`元素，调用插件方法对其进行初始化。例如： ```javascript $(document).ready(function() { $('select...
这篇博客“js控制 select表单子节点左右上下移动”提供了一个解决方案，它可能包含了一个名为`optionSelect.js`的脚本文件，用于实现这个功能。 首先，我们需要理解`select`元素和它的`option`子元素。在HTML中，`...
1. **引入资源**：将“mobileSelect”相关的JS和CSS文件引入到项目中，确保在页面加载时可以访问。 2. **初始化插件**：在HTML结构中创建相应的选择器元素，并通过JavaScript调用插件的初始化方法，设置必要的参数。...
**jQuery双向列表左右移动选择框**是一种常见的交互设计，它允许用户在两个列表之间移动项目，通常用于选择或分配选项。这种设计广泛应用于各种应用程序，如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...
在React开发中，创建一个可视化操控的左右多选Select组件是一项常见的需求，特别是在构建复杂的用户界面时。这个组件允许用户通过直观的交互方式在两个选择框之间移动选项，从而实现多选功能。以下是对该React组件...
创建一个用户，只分配select 权限 1. 用sys用户登陆， 创建用户并赋权限 create user cc551it identified by "cc551it"; grant connect,resource to cc551it; grant create synonym to cc551it; 2. 用newccs用户...
功能强大，编写简单，易于看懂，左右两个select框进行数据交换。支持多选交换以及排序功能，需要的童鞋可以下载一试