`

js控制多选框左右移动

阅读更多

<script language="JavaScript">
var employee = new Array();
employee[0] = ['办公室', '办公室人员1|01', '办公室人员2|02', '办公室人员3|03'];
employee[1] = ['财务部', '财务部人员1|11', '财务部人员2|12', '财务部人员3|13'];
employee[2] = ['技术部', '技术部人员1|21', '技术部人员2|22', '技术部人员3|23'];
employee[3] = ['工程部', '工程部人员1|31', '工程部人员2|32', '工程部人员3|33'];
employee[4] = ['预算部', '人技术部员1|41', '人技术部员2|42', '人技术部员3|43'];

function window.onload() {
for (var i=0; i<employee.length; i++)
form1.s1.options.add(new Option(employee[i][0], i));
}

function check_employee(ID) {
for (var i=0; i<form1.s3.options.length; i++)
if (form1.s3.options[i].value == ID)
return false;
return true;
}

function select_employee(v) {
form1.s2.options.length = 0;
for (var i=1; i<employee[v].length; i++)
if (check_employee(employee[v][i].split('|')[1])) form1.s2.options.add(new Option(employee[v][i].split('|')[0], employee[v][i].split('|')[1]));
}

function move_right() {
if (form1.s2.selectedIndex >= 0) {
form1.s3.options.add(new Option(form1.s2.options[form1.s2.selectedIndex].text, form1.s2.options[form1.s2.selectedIndex].value));
form1.s2.options[form1.s2.selectedIndex].removeNode(true);
}
else { alert('请选择一个员工'); }
}

function move_left() {
form1.s3.selectedIndex >= 0 ? form1.s3.options[form1.s3.selectedIndex].removeNode(true) : alert('请选择一个员工');
if (form1.s1.selectedIndex >= 0) select_employee(form1.s1.selectedIndex);
}

function move_right_all() {
for (var i=0; i<form1.s2.options.length; i++)
form1.s3.options.add(new Option(form1.s2.options[i].text, form1.s2.options[i].value));
form1.s2.options.length = 0;
}

function move_left_all() {
form1.s3.options.length = 0;
if (form1.s1.selectedIndex >= 0) select_employee(form1.s1.selectedIndex);
}

function employee_submit() {
var userlist = new Array();
for (var i=0; i<form1.s3.options.length; i++)
userlist[userlist.length] = form1.s3.options[i].value;
alert(userlist);
}
</script>

<form name="form1" method="post" action="">
<table>
<tr><td>部门<br><select name="s1" size="15" style="width:100px;" onChange="select_employee(this.value)"></select></td>
<td>部门人员<br><select name="s2" size="15" style="width:100px;" onDblClick="move_right()"></select></td>
<td><input type="button" value="==>" onClick="move_right()"><br><br><input type="button" value="<==" onClick="move_left()"><br><br><input type="button" value="全选" onClick="move_right_all()"><br><input type="button" value="全删" onClick="move_left_all()"></td>
<td>选定人员<br><select name="s3" size="15" style="width:100px;" onDblClick="move_left()"></select></td>
</tr>
</table>
用户选择列表框,©风云突变 Dec 2003
<input type="button" value="确定" onClick="employee_submit()">
</form>

分享到:
评论

相关推荐

    复选框的左右移动

    7. **代码组织**:为了保持代码整洁,可以将复选框移动逻辑封装成一个函数,然后在事件处理中调用。这样,代码更易于维护和扩展。 综上所述,"复选框的左右移动"是通过jQuery实现的一种高效权限管理方式。它结合了...

    js移动多选框

    javascript移动多选框很好的例子

    js 特效 5右拖动--多选框控制

    在JavaScript(JS)编程中,"5右拖动--多选框控制"是一种常见的交互式特效,主要用于增强用户的操作体验。这种特效允许用户通过拖动一个元素(通常是一个滑块或者选择器)来控制多个多选框的可见性。在这个场景中,...

    多选框的处理操作JS

    实现两个多选框之间的移动数据操作实现两个多选框之间的移动数据操作实现两个多选框之间的移动数据操作

    jquery select多选框的左右移动 具体实现代码

    在本示例中,我们探讨的是如何使用jQuery来实现一个功能,允许用户在两个多选框之间移动选项,即从左侧的多选框选择选项并将其添加到右侧,或者从右侧的多选框中移除选项并返回左侧。这个功能在需要用户分配或管理...

    多选框功能并除去最后一个逗号

    在设计用户界面时,特别是在Web开发和移动应用开发中,多选框是一个不可或缺的部分。本篇文章将深入探讨多选框的功能、用途,以及如何处理最后的逗号问题。 首先,多选框的主要功能是为用户提供多选交互,用户可以...

    带多选框的tree

    在前端开发中,实现带多选框的Tree组件通常会用到JavaScript库或框架,如React、Vue、Angular等。例如,React中可以使用`antd`库的`Tree`组件,它支持多选模式,并提供API来处理节点的选中状态。在Vue中,`Element ...

    bootstrap下拉多选框

    在Bootstrap中,下拉多选框是实现用户界面交互时常见的一种元素,尤其在数据筛选、选项选择等场景下非常实用。Bootstrap本身并没有内置专门的多选下拉框组件,但通过扩展或第三方插件,我们可以轻松地实现这一功能。...

    uniapp多选标签/多选按钮/多选框源码

    本项目着重讲解了如何在`uni-app`中实现多选标签、多选按钮和多选框的功能,这对于构建用户交互丰富的应用至关重要。 首先,我们来看“多选标签”。在UI设计中,多选标签(Multiple Select Tags)通常用于让用户在...

    多选框的运用.rar

    7. **JavaScript操作**:通过JavaScript,可以实现多选框的动态控制,例如禁用/启用多选框、设置/获取值、实现联动效果等。例如,使用jQuery: ```javascript $('#option1').prop('disabled', true); // 禁用多选...

    多项选择的列表框,左右选择,带排序功能

    这种设计简化了多选过程,避免了传统多选框的繁琐操作。 其次,排序功能是这个组件的一大亮点。用户可以通过拖拽项目来改变它们在列表中的顺序,这在处理有优先级或逻辑顺序的数据时特别有用。实现这一功能通常涉及...

    select选择框内容左右移动

    本主题聚焦于如何实现`select`选择框内容的左右移动功能,这是一种增强用户体验的方式,尤其适用于需要用户在多个选项间频繁切换的场景。下面将详细探讨这一功能的实现原理、技术栈以及相关的编程知识点。 1. **...

    多选框插件uichoose

    3. **易用性**:配置简单,只需要引入相关的JavaScript和CSS文件,通过简单的API设置,即可实现多选框和单选框的个性化定制。 4. **功能丰富**:除了基本的选中和取消选中,uichoose还支持禁用选项、分组、多级选择...

    js实现左右2个下拉选择框,左右上下移动功能

    在JavaScript编程中,创建具有左右两个下拉选择框并实现左右上下移动功能是一个常见的交互设计。这个功能常常用于用户在两个列表之间转移选项,比如在“可用”和“已选”之间切换。以下是对这个主题的详细解释: ...

    Bootstrap-selectpicker多选框的简单实例

    在本实例中,我们将探讨如何使用Bootstrap-selectpicker实现多选框功能。 Bootstrap-selectpicker的核心在于其丰富的样式和交互性,它通过CSS和JavaScript来增强默认的HTML `&lt;select&gt;` 元素。首先,你需要在你的...

    bootstrap左右多选多multselect插件

    1. **左右移动**: 用户可以选择一个或多个选项,并通过点击或拖动将这些选项从一个列表移动到另一个列表,实现了从已选到未选,或从未选到已选的轻松转换。 2. **多选功能**: 支持同时选择多个项目,无需逐一单击,...

    非常简单的下拉复选框

    总结,"非常简单的下拉复选框"JavaScript插件是实现高效、美观的多选项选择的理想工具。其简洁的设计、良好的兼容性和丰富的自定义选项,使得它成为前端开发者在构建网页表单时的一个优秀选择。通过理解和掌握这款...

    下拉多选框的实现 js源文件

    在移动设备上,原生的下拉多选框可能不够友好。此时,我们可以利用JavaScript和CSS来创建一个更适合触摸操作的下拉多选框。例如,可以将下拉列表转换为一个可滚动的列表,每个选项都是可点击的块元素。 五、异步...

    js实现鼠标拉框截图

    在JavaScript(简称JS)编程中,实现鼠标拉框截图是一项常见的功能,特别是在Web应用中,如在线编辑器、协作工具等。这个功能的核心是通过监听鼠标事件,结合HTML5的Canvas API来完成图像的选择和捕获。以下是实现这...

Global site tag (gtag.js) - Google Analytics