<script language="javascript">
/**
* moveSelections动态交换多选列表全部数据
* @param arg0 数据来源
* @param rag1 交换对象
*/
function moveSelections(arg0, arg1) {
for (var i=0; i<arg0.options.length; i++) {
var op = arg0.options[i];
arg1.options.add(new Option(op.text, op.value));
arg0.remove(i);
i = i-1;
}
}
/**
* moveSelected动态交换多选列表选择的数据
* @param arg0 数据来源
* @param rag1 交换对象
*/
function moveSelected(arg0, arg1) {
for (var i=0; i<arg0.options.length; i++) {
if (arg0.options[i].selected) {
var op = arg0.options[i];
arg1.options.add(new Option(op.text, op.value));
arg0.remove(i);
i = i-1;
}
}
}
</script>
<body>
<form name="" method="post" action="" onsubmit="window.close();">
<table width="150" height="250" border="0" align="center">
<tr style="height: 90%">
<td width="48%" class="txtd">
<select name="menuNotInRole" size="12" multiple id="menuNotInRole" style="width:100px;height:100%;" ondblclick="moveSelected(document.getElementById('menuNotInRole'), document.getElementById('infoRole.menu_ids'))">
<option value="1">现场经理</option>
<option value="2">省公司人员</option>
<option value="3">测试执行人员</option>
<option value="4">集成商人员</option>
</select>
</td>
<td>
<input type="button" value=">>" onClick="moveSelected(document.getElementById('menuNotInRole'), document.getElementById('infoRole.menu_ids'))"></input><br /><br />
<input type="button" value="<<" onClick="moveSelected(document.getElementById('infoRole.menu_ids'), document.getElementById('menuNotInRole'))"></input>
</td>
<td width="48%" class="txtd">
<select name="infoRole.menu_ids" size=12 multiple id="infoRole.menu_ids" style="width:100px;height:100%;" ondblclick="moveSelected(document.getElementById('infoRole.menu_ids'), document.getElementById('menuNotInRole'))">
<option value="5">项目经理</option>
</select></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="确定" ></input> <input type="reset" value="取消" />
</td>
</tr>
</table>
</form>
</body>
分享到：
相关推荐
左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底
接下来，我们可以通过JavaScript或者jQuery来实现两个`<select>`之间的内容互换。假设我们的页面已经引用了jQuery库，可以编写如下的JavaScript代码： ```javascript function swapOptions() { var select1 = $('#...
本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`<select>`元素。它是创建下拉...
本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能，即在两个下拉框之间进行选项的互选和上下移动。 首先，我们需要了解`optiontransferselect`的基本概念。在Struts2框架中，...
这份压缩包包含两份关键的数据文件：json数组和js数组，以及可能涉及的原生JavaScript和jQuery实现的三级联动效果。 1. JSON数组：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和...
在本方法中，首先需要通过JavaScript动态获取到两个Select元素对象，可以给每个Select元素定义一个唯一的id，然后通过`document.getElementById`方法来获取这些元素。之后，就可以对这些元素中的option节点进行增加...
"select2的css和js，gosn.jar" 这个标题提到了两个主要组件：Select2的CSS样式文件和JavaScript库，以及一个名为`gosn.jar`的Java工具，它用于将Java对象转换为JSON格式的数据。 **描述详解：** 描述中进一步明确...
通过`insertBefore`和`appendChild`方法交换两个节点的位置。如果节点后面有兄弟节点，则插入到该节点前面；如果没有，则直接添加到父节点末尾。 ##### 4. 将某一行向下移动 ```javascript function moveDown(_a) ...
在网页开发中，经常需要实现两个列表框（listbox）之间的数据交换功能，即从一个列表框中选择某些项并移动到另一个列表框中。本文将详细介绍如何使用JavaScript来实现这一功能，并通过实例来具体分析操作列表框的...
在HTML部分，`index.html`中会包含基本的结构，比如两个`select`元素和一个用于加载数据的按钮。CSS样式文件`createSelect.css`则用于美化`select`元素和页面布局。 总结起来，这个示例展示了如何使用JQuery和HTML...
交换功能通常涉及到两个下拉列表，用户可以通过点击按钮来将一个列表中选中的内容添加到另一个列表中，或者反过来。文中通过两个按钮实现双向交换。以下是一个简单的实现逻辑： ```javascript function allsel(from,...
3. **移动Option到另一个Select中** 移动Option可以在不同的Select之间进行，`fnMove(fromSelectID, toSelectID)`函数演示了这个过程。它首先选择要移动的Option，然后将其添加到目标Select中，并从源Select中移除...
JSON2Select是一个JavaScript库，主要用于将JSON数据转换为多级联动选择框（下拉菜单）。在Web开发中，联动选择框常用于实现区域选择、层级分类等，允许用户逐级选择，例如省份-城市-区县。这个库依赖于jQuery库，...
总结，使用JavaScript交换`select`列表中的选项内容主要涉及以下几个知识点： 1. 访问`select`元素和它的`options`集合。 2. 使用`splice`方法或临时变量实现选项的交换。 3. 添加事件监听器，如按钮点击事件，以...
数据交换,高亮显示,jQuery插件 jQuery 两个表格的数据栏互相交换数据，高亮显示被选定的行，双击某一行数据会交换到右侧数据栏，在右侧双击后重新复位，增加TableView.delRange方法，修改SelectorView.select和...
1. **HTML结构**：创建两个<select>元素，第一个作为一级菜单，第二个作为二级菜单。初始时，二级菜单为空或显示默认选项。 2. **jQuery绑定事件**：使用jQuery的`change()`事件监听一级菜单的选择变化，当用户选择...
DWR简化了Ajax的使用，使得开发者可以方便地在前端和后端之间交换数据。 现在，让我们深入探讨如何使用Ajax和DWR实现select二级联动： 1. **前端准备**：首先，你需要两个HTML的`<select>`元素，一个代表一级分类...
通过XMLHttpRequest对象与服务器进行异步数据交换，再用JavaScript处理返回的数据，实现页面的局部刷新。在ECharts与后台数据交互中，AJAX起到了关键的角色。 三、ECharts与MySQL数据交互步骤 1. **创建数据库连接*...