例如有以下2个select设置为多选,今天我们要实现的2个select之间的内容相互移动,并且是级联的移动。
<td align="center" width="35%">
<select name="menuUnUsable" multiple="multiple" size="18" style="width:240px;" id="notIsUserMenu">
</select>
</td>
<td align="center" width="35%">
<select name="menuUsable" multiple="multiple" size="18" style="width:240px;" id="isUserMenu">
</select>
</td>
//双击可用菜单时,可用菜单变成不可用菜单
$("select[name=menuUsable]").dblclick(function() {
moveUseable();
});
//双击不可用的菜单时,不可用的菜单变成可用的菜单
$("select[name=menuUnUsable]").dblclick(function() {
moveUnUseable();
});
当然要实现级联移动,必须对select中的内容做些处理,我的方法是:从数据库中取出需要的name_和id_字段时,对name_字段做了些处理(子对象的name_字段=父对象的name_+“-”+子对象的name_),经过这么处理页面上就很容易区分出select内容之间的父子关系。以下是js处理的select内容之间的移动并且实现了级联:
var separator = "-";
//移动不可用菜单
function moveUnUseable(){
var e1 = document.getElementById("notIsUserMenu");
var e2 = document.getElementById("isUserMenu");
var array = new Array();
for(var i=0;i<e1.options.length;i++){
//得到选中元素
if(e1.options[i].selected){
var option = e1.options[i];
//添加本身
array.push(option);
//若当前元素为子菜单
if(option.text.indexOf(separator)!=-1){
//循环找出它的父菜单
for(var j=0;j<e1.options.length;j++){
var temp = e1.options[j];
if((temp.text.indexOf(separator)==-1) && (option.text.indexOf(temp.text)!=-1)){
//添加父菜单
array.push(temp);
}
}
}
}
}
//去除数组中的重复项
var list = array;
for(var i=0;i<array.length;i++){
for(var j=i+1;j<array.length;j++)
{
if(array[i].value==array[j].value)
{
list.splice(j,1);
}
}
}
//移动选项
for(var i=0;i<list.length;i++){
e2.options.add(new Option(list[i].text,list[i].value));
e1.remove(list[i].index);
}
}
//移动可用菜单
function moveUseable(){
var e1 = document.getElementById("isUserMenu");
var e2 = document.getElementById("notIsUserMenu");
var array = [];
for(var i=0;i<e1.options.length;i++){
//得到选中元素
if(e1.options[i].selected){
var option = e1.options[i];
//若当前元素为父菜单
if(option.text.indexOf(separator)==-1){
//循环找出它的子菜单
for(var j=0;j<e1.options.length;j++){
var temp = e1.options[j];
if((temp.text.indexOf(separator)!=-1) && (temp.text.indexOf(option.text)!=-1)){
//添加子菜单
array.push(temp);
}
}
}
//添加本身
array.push(option);
}
}
//去除数组中的重复项
var list = array;
for(var i=0;i<array.length;i++){
for(var j=i+1;j<array.length;j++)
{
if(array[i].value==array[j].value)
{
list.splice(j,1);
}
}
}
//移动选项
for(var i=0;i<array.length;i++){
e2.options.add(new Option(array[i].text,array[i].value));
e1.remove(array[i].index);
}
}
分享到:
相关推荐
总结起来,实现“两个select下拉框中的数据相互移动”涉及到HTML、CSS和JavaScript的基本知识,以及对用户交互的响应和处理。实际开发中还需要根据具体需求进行调整和优化,确保用户体验的流畅和功能的完善。
在本文中,我们将深入探讨如何实现两个`select`元素之间的多选选项相互移动的功能,以及相关的JavaScript代码示例。在Web开发中,这样的功能常见于用户需要在多个选项中进行选择并分配的情况,例如角色分配或者分类...
根据提供的文件内容,我们可以提炼出以下关于JavaScript实现两个select下拉框选项左移右移的知识点: 1. 通过JavaScript实现两个下拉框间选项的转移是常见的前端技术应用场景。它允许用户通过简单的操作来移动元素...
本篇内容主要介绍了如何使用jQuery技术实现在网页上左右两个列表框之间内容的相互移动功能。内容涉及了jQuery的事件响应机制和页面元素属性动态操作的相关技巧。以下是根据提供的文件内容,详细阐述实现左右列表框...
本文介绍了一种使用JavaScript来实现两个HTML Select元素中数据相互交换的方法。该方法涉及到动态地操作DOM元素,特别是对select元素中的option节点进行插入和删除的操作技巧。 #### 1. Select元素与JavaScript 在...
在Web开发中,经常需要实现两个下拉列表(select元素)中选项(option元素)的相互添加或移动操作。这种操作可以通过纯JavaScript或jQuery来实现。上述内容提供了一个使用jQuery实现该功能的插件示例。以下详细介绍...
"两个table之间相互移动数据"这个话题涉及到的是数据操作的核心技能,它涵盖了数据的导入、导出、更新和删除等基本操作。以下将详细介绍如何在两个表格间进行数据交互以及相关的技术与方法。 首先,我们要理解表格...
在这个项目中,"select双向选择菜单"指的是两个相关的HTML `<select>` 元素,它们之间的数据可以相互移动。用户可以从一个菜单中选择选项并添加到另一个菜单,也可以从另一个菜单中删除已选择的选项。这种功能在数据...
总结来说,JavaScript的`listbox_moveacross`函数实现了在两个列表框之间移动被选中选项的功能,适用于需要用户交互选择并转移数据的场景,如设置选择、多选过滤等。这个功能的实现依赖于对DOM操作的深入理解,包括...
D3.js,全称Data-Driven Documents,是一种强大的JavaScript库,专用于数据可视化。它允许开发者将数据绑定到DOM(文档对象模型)上,并通过数据驱动的方法更新文档。在这个"用D3.js画的人物关系demo"中,我们将探讨...
对于允许多选的场景,我们可能需要在两个select框之间相互移动选项。这通常涉及到检查是否选中了多个选项,并使用.remove()方法将选中的选项移除,然后使用.append()或.prepend()方法将选中的选项添加到另一个select...
在这个场景中,"三级联动"指的是在一个选择流程中,一个级别的选择会影响到下一个级别的选项,形成三个层次的相互关联。 首先,我们需要理解"pw"可能是指"personalization"或"password",但在这种上下文中,更有...
在这个实例中,我们看到如何使用JavaScript来实现ListBox中选项的动态移动,包括上移、下移、左移和右移的功能。这个功能常用于需要调整列表顺序或者在两个ListBox之间交换项目的场景。 首先,我们来看一下HTML部分...
Bootstrap是一个流行的前端开发框架,提供了丰富的CSS样式和JavaScript组件,可以快速构建响应式和移动优先的网页。在本项目中,Bootstrap可以帮助你创建美观的用户界面,如表格、表单和按钮,用于显示和编辑数据。...
2. JavaScript 实现:动态更新下拉框内容通常需要JavaScript(如jQuery)来实现。当用户在上一个下拉框中做出选择时,触发一个事件,该事件会根据预定义的数据结构(如JSON对象)更新下一个下拉框的选项。 3. 数据...
2. 动画效果:利用CSS和JavaScript实现元素的平移、旋转、缩放等动画效果。 3. 交互性:响应用户输入,如鼠标悬停、点击等,改变网页状态。 4. 层(Layers):通过CSS定位或JavaScript控制,允许元素在页面上自由...
JQuery实现角色左右选择特效是一种基于JQuery库的网页交互设计技术,它允许用户通过界面操作,将选项在两个列表框之间相互转移。本技术适用于需要角色权限设置、物品分类、表单选项等多选转移的场景。 在本技术实现...
8. JavaScript随机数:JavaScript可以生成1到10之间的随机数,通常使用Math.random()函数实现。 9. 关系数据库:关系数据库使用二维表(也称为关系)来表示实体之间的联系。 10. TCP/IP协议:TCP/IP协议是因特网上...
例如,如果你想让第二个选项卡默认显示,可以这样做: ```javascript $("#tabs").tabs({ active: 1 }); ``` 6. **响应式设计**:jQuery UI的Tabs组件是响应式的,但可能需要调整CSS以适应不同的屏幕尺寸。你可以...