<html>
<head><title></title></head>
<body>
多选框 arrayList 以ascii进行排序
<table>
<tr><td>
<select id="first" name="first" multiple="multiple" style="height:200px;width:100px" >
<option value="1">blue</option>
<option value="2">red</option>
<option value="3">white</option>
<option value="4">001</option>
<option value="5">1000</option>
</select>
</td>
<td>
<input type="button" value=">>" onclick="moveright()" style="width:100px"/>
<br />
<input value="<<" type="button" onclick="moveleft()" style="width:100px" />
<br />
<input value=">>>" type="button" onclick="moveallright()" style="width:100px"/>
<br />
<input value="<<<" type="button" onclick="moveallLeft()" style="width:100px"/>
</td>
<td>
<select id="secord" name="secord" multiple="multiple" style="height:200px;width:100px">
</select>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
function moveright(){
var srcList = document.getElementById("first");
var destList = document.getElementById("secord");
moveList(srcList,destList,false);
}
function moveleft(){
var srcList = document.getElementById("secord");
var destList = document.getElementById("first");
moveList(srcList,destList,false);
}
function moveallright(){
var srcList = document.getElementById("first");
var destList = document.getElementById("secord");
moveList(srcList,destList,true);
}
function moveallLeft(){
var srcList = document.getElementById("secord");
var destList = document.getElementById("first");
moveList(srcList,destList,true);
}
}
newDestList.sort(function(a,b){return a.text>b.text?1:-1});
- 大小: 5.4 KB
分享到：
相关推荐
总结起来，实现“两个select下拉框中的数据相互移动”涉及到HTML、CSS和JavaScript的基本知识，以及对用户交互的响应和处理。实际开发中还需要根据具体需求进行调整和优化，确保用户体验的流畅和功能的完善。
本文将深入探讨如何使用JavaScript实现两个Select下拉框之间的元素互相移动的功能。这一功能常见于需要动态调整选项归属的情景，例如在多选设置或数据分类中。 首先，我们需要创建两个Select元素，分别命名为`...
在本文中，我们将深入探讨如何实现两个`select`元素之间的多选选项相互移动的功能，以及相关的JavaScript代码示例。在Web开发中，这样的功能常见于用户需要在多个选项中进行选择并分配的情况，例如角色分配或者分类...
根据提供的文件内容，我们可以提炼出以下关于JavaScript实现两个select下拉框选项左移右移的知识点： 1. 通过JavaScript实现两个下拉框间选项的转移是常见的前端技术应用场景。它允许用户通过简单的操作来移动元素...
本篇内容主要介绍了如何使用jQuery技术实现在网页上左右两个列表框之间内容的相互移动功能。内容涉及了jQuery的事件响应机制和页面元素属性动态操作的相关技巧。以下是根据提供的文件内容，详细阐述实现左右列表框...
在本文中，我们将深入探讨如何利用 jQuery 来操作两个 `<select>` 元素，实现值之间的互相传递。这对于构建动态表单或者需要用户交互选择的界面非常有用。 首先，我们需要理解 `<select>` 元素在 HTML 中的作用。`...
在Web开发中，经常需要实现两个下拉列表（select元素）中选项（option元素）的相互添加或移动操作。这种操作可以通过纯JavaScript或jQuery来实现。上述内容提供了一个使用jQuery实现该功能的插件示例。以下详细介绍...
本文将详细介绍如何使用JavaScript实现`select`控件间内容的互相移动，以及提供的代码示例的功能解析。 首先，我们需要理解HTML中的`<select>`元素。`<select>`元素允许用户从一组预先定义的选项中进行选择。当`...
为了展示这个功能，通常会有一个HTML页面，包含两个列表框（`<select>`元素）以及两个按钮，一个用于向右移动选中的选项，一个用于向左移动。当用户点击按钮时，调用`listbox_moveacross`函数，传入相应列表框的ID。...
"两个table之间相互移动数据"这个话题涉及到的是数据操作的核心技能，它涵盖了数据的导入、导出、更新和删除等基本操作。以下将详细介绍如何在两个表格间进行数据交互以及相关的技术与方法。 首先，我们要理解表格...
1. 初始化：创建两个select菜单，并填充初始数据。 2. 绑定事件：为每个菜单的`change`事件绑定处理函数。 3. 处理事件：在事件处理函数中，根据用户的选择状态（添加或移除）使用`append()`或`remove()`方法更新另...
在本方法中，首先需要通过JavaScript动态获取到两个Select元素对象，可以给每个Select元素定义一个唯一的id，然后通过`document.getElementById`方法来获取这些元素。之后，就可以对这些元素中的option节点进行增加...
整个示例代码实现了用户交互，使得用户可以通过点击按钮轻松地在两个Select之间调整选项，这对于简化用户界面和提高操作便捷性非常有用。需要注意的是，为了使此功能正常工作，页面必须包含jQuery库的引用，这里使用...
它由两个互相联动的列表组成，通常一个被称为“可选列表”，另一个是“已选列表”。用户可以通过鼠标操作将可选列表中的条目添加到已选列表，反之亦然。当用户点击一个条目时，该条目会从一个列表移动到另一个列表，...
对于允许多选的场景，我们可能需要在两个select框之间相互移动选项。这通常涉及到检查是否选中了多个选项，并使用.remove()方法将选中的选项移除，然后使用.append()或.prepend()方法将选中的选项添加到另一个select...
doubleselect标签：生成一个相互关联的列表框，该标签由两个下拉选择框组成。 datetimepicker标签：生成一个日期、时间下拉列表框。 head标签：生成HTML页面的HEAD部分。 file标签：在页面上生成一个上传文件元素...
在网页布局设计中，使两个`div`元素并排显示是一项常见的需求。在这个问题中，通过设置CSS样式，我们可以让两个`div`元素在同一行内排列。以下将详细解释实现这个效果的关键步骤和涉及的CSS属性。 首先，我们有两个...