/**
fromid:源list的id.
toid:目标list的id.
moveOrAppend参数("move"或者是"append"):
move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加.
append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加.
isAll参数(true或者false):是否全部移动或添加
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
if(moveOrAppend.toLowerCase() == "move") { //移动
if(isAll == true) { //全部移动
$("#"+fromid+" option").each(function() {
//将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
$("#"+fromid).empty(); //清空源list
}
else if(isAll == false) {
$("#"+fromid+" option:selected").each(function() {
//将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
//目标list中已经存在的option并没有移动,仍旧在源list中,将其清空.
if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) {
$("#"+fromid).get(0)
.removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0));
}
});
}
}
else if(moveOrAppend.toLowerCase() == "append") {
if(isAll == true) {
$("#"+fromid+" option").each(function() {
$("<option></option>")
.val($(this).val())
.text($(this).text())
.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
else if(isAll == false) {
$("#"+fromid+" option:selected").each(function() {
$("<option></option>")
.val($(this).val())
.text($(this).text())
.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
}
};
/**
功能大体同上("move").
不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除.
isAll参数(true或者false):是否全部移动或添加
*/
jQuery.list2list = function(fromid,toid,isAll) {
if(isAll == true) {
$("#"+fromid+" option").each(function() {
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
else if(isAll == false) {
$("#"+fromid+" option:selected").each(function() {
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
};
分享到:
相关推荐
在网页设计中,"select互选效果"是一种交互设计特性,允许用户在两个或多个下拉选择框(`<select>`元素)之间进行双向选择,实现数据的同步更新。这样的功能常见于需要关联两个列表项的场景,比如地区选择、类别筛选...
在Web开发中,select控件(下拉选择框)是一种常见...以上就是使用jQuery实现两个select控件互移操作涉及的主要知识点。通过本方法,开发者可以快速实现用户界面中的选项动态管理功能,提升Web应用的交互性和用户体验。
在本文中,我们将深入探讨如何利用 jQuery 来操作两个 `<select>` 元素,实现值之间的互相传递。这对于构建动态表单或者需要用户交互选择的界面非常有用。 首先,我们需要理解 `<select>` 元素在 HTML 中的作用。`...
接下来,我们要实现两个select框之间的数据同步。这通常涉及到监听用户的选中事件,如`change`事件。当一个select框中的选项被改变时,我们需要更新另一个select框的状态。例如: ```javascript $('select.left')....
本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能,即在两个下拉框之间进行选项的互选和上下移动。 首先,我们需要了解`optiontransferselect`的基本概念。在Struts2框架中,...
.NET中的DataSet是一个非常重要的数据处理组件,它在.NET框架中扮演着数据缓存的角色,允许应用程序在不直接连接到数据库的情况下处理数据。...在实际项目中,理解和熟练运用这两个方面对于.NET开发者来说至关重要。
这个插件允许用户在两个独立的列表之间进行选择,使得多选操作更加直观和高效,特别适合于需要用户分配或分配多个分类、角色或选项的场景。 在设计用户界面时,交互性是至关重要的,Bootstrap Multiselect插件提供...
本文将深入探讨“jquery下拉框左右选择”这一主题,它是一种交互式用户界面元素,通常用于在两个列表之间移动选项,帮助用户进行多选或排序操作。 首先,我们要明白“下拉框左右选择”的基本概念。这是一种UI设计...
在处理数据时,我们经常需要对表格中的数据进行各种各样的操作,其中之一就是行列互转。比如,原始数据可能是按学生姓名和科目存储成绩,但我们需要按科目汇总所有学生的成绩。这样的需求就需要用到行列互转的技术。...
接下来,我们需要编写jQuery代码来监听`select1`和`select2`的`change`事件,并在事件触发时同步两个列表: ```javascript $(document).ready(function() { $('#select1').on('change', function() { var ...
Struts和WebWork是两个非常著名的Java Web框架,它们各自提供了丰富的功能来帮助开发者构建动态、交互式的Web应用。...同时,这也体现了Java社区对于兼容性和互操作性的重视,以及开发者在面对技术挑战时的创新精神。
首先,我们需要启动 OPC-UA Configurator 软件,在 Data Access 窗体中的 Select device type 中选择 PLC TwinCAT 3(TMC)filtered,然后点击两次 Add,添加两个 OPC-UA server。我们将其命名为 PLC1 和 PLC2。 在 ...
在.NET框架中,C#和VB.NET是两种主要的编程语言,它们都具有高度的互操作性,使得开发者可以根据个人喜好或项目需求选择适合的语言。本文将深入探讨C#与VB.NET代码之间的转换方法,以及如何在实际开发环境中实现这种...
- **设计两个内外层互相关的嵌套查询**:例如,查询所有教师负责的课程中有选课人数超过10人的课程的教师信息:`SELECT 教师.姓名 FROM 教师 WHERE EXISTS (SELECT * FROM 课程 INNER JOIN 选课 ON 课程.课程编号 = ...
在SQL Server中,行列互转是一种常见的数据处理...通过熟练掌握这两个函数,可以提高我们在处理大数据时的效率和灵活性。对于数据库管理员和数据分析师来说,理解并运用Pivot和Unpivot是提升数据处理能力的关键一步。
构件技术有助于提高软件的开发效率,降低维护成本,并促进系统的可扩展性和互操作性。 中间件作为连接不同软件构件的桥梁,它提供了一种标准的方式来使这些构件能够相互通信和协同工作。中间件负责处理底层的通信...
在JavaScript编程中,"js实现左右双向选择器"是一个常见的交互设计元素,它允许用户在两个独立的列表之间进行选择和转移项目。这种选择器通常用于处理数据的筛选、分类或者关联,例如在音乐播放器中选择歌曲列表或在...
要使用JavaScript实现下拉菜单之间的选项互移以及对菜单中的选项进行排序,首先需要了解HTML中select元素、option元素的使用方法,以及JavaScript如何通过DOM操作来动态地添加或移除这些选项。 ### 知识点说明: 1...
在IT领域,数据库之间的互操作性是至关重要的。SQL Server作为一款强大的关系型数据库管理系统,有时需要与诸如Microsoft Access这样的轻量级数据库进行数据交互。本文将深入探讨如何使用SQL Server连接到Access...