`
zhenghuali168
  • 浏览: 74725 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

两个Select之间的互操作

 
阅读更多

/**
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互选效果"是一种交互设计特性,允许用户在两个或多个下拉选择框(`&lt;select&gt;`元素)之间进行双向选择,实现数据的同步更新。这样的功能常见于需要关联两个列表项的场景,比如地区选择、类别筛选...

    jQuery实现两个select控件的互移操作

    在Web开发中,select控件(下拉选择框)是一种常见...以上就是使用jQuery实现两个select控件互移操作涉及的主要知识点。通过本方法,开发者可以快速实现用户界面中的选项动态管理功能,提升Web应用的交互性和用户体验。

    jquery 操作两个select实现值之间的互相传递

    在本文中,我们将深入探讨如何利用 jQuery 来操作两个 `&lt;select&gt;` 元素,实现值之间的互相传递。这对于构建动态表单或者需要用户交互选择的界面非常有用。 首先,我们需要理解 `&lt;select&gt;` 元素在 HTML 中的作用。`...

    jquery双向选择器两侧select框列表文字左右选择器代码

    接下来,我们要实现两个select框之间的数据同步。这通常涉及到监听用户的选中事件,如`change`事件。当一个select框中的选项被改变时,我们需要更新另一个select框的状态。例如: ```javascript $('select.left')....

    JQuery实现select互换数据和上下移动

    本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能,即在两个下拉框之间进行选项的互选和上下移动。 首先,我们需要了解`optiontransferselect`的基本概念。在Struts2框架中,...

    .net数据库互操作 dataset

    .NET中的DataSet是一个非常重要的数据处理组件,它在.NET框架中扮演着数据缓存的角色,允许应用程序在不直接连接到数据库的情况下处理数据。...在实际项目中,理解和熟练运用这两个方面对于.NET开发者来说至关重要。

    bootstrap左右多选多multselect插件

    这个插件允许用户在两个独立的列表之间进行选择,使得多选操作更加直观和高效,特别适合于需要用户分配或分配多个分类、角色或选项的场景。 在设计用户界面时,交互性是至关重要的,Bootstrap Multiselect插件提供...

    jquery下拉框左右选择

    本文将深入探讨“jquery下拉框左右选择”这一主题,它是一种交互式用户界面元素,通常用于在两个列表之间移动选项,帮助用户进行多选或排序操作。 首先,我们要明白“下拉框左右选择”的基本概念。这是一种UI设计...

    Sql行列互转

    在处理数据时,我们经常需要对表格中的数据进行各种各样的操作,其中之一就是行列互转。比如,原始数据可能是按学生姓名和科目存储成绩,但我们需要按科目汇总所有学生的成绩。这样的需求就需要用到行列互转的技术。...

    jQuery实现双向选择列表框

    接下来,我们需要编写jQuery代码来监听`select1`和`select2`的`change`事件,并在事件触发时同步两个列表: ```javascript $(document).ready(function() { $('#select1').on('change', function() { var ...

    struts与webwork的jar包无冲突版 自定义标签无冲突

    Struts和WebWork是两个非常著名的Java Web框架,它们各自提供了丰富的功能来帮助开发者构建动态、交互式的Web应用。...同时,这也体现了Java社区对于兼容性和互操作性的重视,以及开发者在面对技术挑战时的创新精神。

    OPC-UA使用入门2of2(2.1).docx

    首先,我们需要启动 OPC-UA Configurator 软件,在 Data Access 窗体中的 Select device type 中选择 PLC TwinCAT 3(TMC)filtered,然后点击两次 Add,添加两个 OPC-UA server。我们将其命名为 PLC1 和 PLC2。 在 ...

    C#与VB.NET代码互转

    在.NET框架中,C#和VB.NET是两种主要的编程语言,它们都具有高度的互操作性,使得开发者可以根据个人喜好或项目需求选择适合的语言。本文将深入探讨C#与VB.NET代码之间的转换方法,以及如何在实际开发环境中实现这种...

    1704091029-蔡腾飞-数据库实验四.docx

    - **设计两个内外层互相关的嵌套查询**:例如,查询所有教师负责的课程中有选课人数超过10人的课程的教师信息:`SELECT 教师.姓名 FROM 教师 WHERE EXISTS (SELECT * FROM 课程 INNER JOIN 选课 ON 课程.课程编号 = ...

    SQLServer行列互转实现思路(聚合函数)

    在SQL Server中,行列互转是一种常见的数据处理...通过熟练掌握这两个函数,可以提高我们在处理大数据时的效率和灵活性。对于数据库管理员和数据分析师来说,理解并运用Pivot和Unpivot是提升数据处理能力的关键一步。

    软件构件与中间件

    构件技术有助于提高软件的开发效率,降低维护成本,并促进系统的可扩展性和互操作性。 中间件作为连接不同软件构件的桥梁,它提供了一种标准的方式来使这些构件能够相互通信和协同工作。中间件负责处理底层的通信...

    js实现左右双向选择器

    在JavaScript编程中,"js实现左右双向选择器"是一个常见的交互设计元素,它允许用户在两个独立的列表之间进行选择和转移项目。这种选择器通常用于处理数据的筛选、分类或者关联,例如在音乐播放器中选择歌曲列表或在...

    使用Javascript实现选择下拉菜单互移并排序

    要使用JavaScript实现下拉菜单之间的选项互移以及对菜单中的选项进行排序,首先需要了解HTML中select元素、option元素的使用方法,以及JavaScript如何通过DOM操作来动态地添加或移除这些选项。 ### 知识点说明: 1...

    SQLSERVER 连接access驱动及脚本

    在IT领域,数据库之间的互操作性是至关重要的。SQL Server作为一款强大的关系型数据库管理系统,有时需要与诸如Microsoft Access这样的轻量级数据库进行数据交互。本文将深入探讨如何使用SQL Server连接到Access...

Global site tag (gtag.js) - Google Analytics