`
uule
  • 浏览: 6358325 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

jQuery实现Select多选列表双击选中项时相互添加

阅读更多

jQuery实现在左边双击某一项时添加到右边,右边时添加到左边:


部分修饰代码简略:

<table style="...">
							<tr>
								<td colspan="2" valign="top" width="47%"> 
									<select multiple="multiple"  id="uncountryTable" name="uncountryTable" style="height:300px;width:245px;">										
										
									</select>
								</td>
								<td align="center">
									...	
								</td>
								<td colspan="2" valign="top" width="47%">
									<select multiple="multiple" id="countryTable" name="countryTable" style="height:300px;width:245px;">
																	
									</select>
								</td>
							</tr>
							</table>

 以左边为例:

刚开始我的思路是这样的: 当左边select变化时,如果有一项选中,那么当它被双击时就执行相应的操作;但当实施时才发现这样根本不可行,代码如下:

//jQuery("#uncountryTable").change(function(){
				//jQuery("#uncountryTable option").each(function(){
					//if(jQuery(this).attr("selected") == true){					
						//jQuery(this).dblclick(function(){
							//alert(111111);
							//var option = "<option value='"+jQuery(this).val()+"'>"+jQuery(this).text()+"</option>";					
							//jQuery("#countryTable").append(option);
							//jQuery(this).remove();
						//});
					//}
				//});
			//});

 其实一直到判断选中的这一步都是正确的,经测试此时也确实可以alert出相应选中项的值

(多选下拉框获取选中文本、value:   也可以用change方法)

//jQuery("#uncountryTable").change(function(){
				//jQuery("#uncountryTable option").each(function(){
					//if(jQuery(this).attr("selected") == true){
						//alert(jQuery(this).val()+":"+jQuery(this).text());
					//}
				//});
			//});

 但是一到dblclick(fn)方法这步就有问题了,连测试的111111都不弹出,几经测试都无效果,无奈只得另谋它路。


在网上搜了一下,发现一个哥们用JS写的同样效果代码(下面),看了之后才发现原来自己想得太复杂了,正确思路应该是这样的: 当双击select的时候,触发dblclick(fn)事件,如果某一项被选中(你双击某一项,它就肯定被选中啦),就将其添加到右边,这样就可以实现效果,哈哈。

上代码:

jQuery(document).ready(function() {		
jQuery("#uncountryTable").dblclick(function(){
				jQuery("#uncountryTable option:selected").each(function(){
					var option = "<option value='"+jQuery(this).val()+"'>"+jQuery(this).text()+"</option>";					
					jQuery("#countryTable").append(option);
					jQuery(this).remove();
				});
			});	
});

 很简单的东西,换下思路就实现了,因此,以后遇到问题时,就先问下自己,是不是我想得太复杂了,哈哈......


那哥们效果+代码(主要部分):


<head>
    <script>
        function removeItem(){
            var sltSrc=document.getElementById('sltSrc');
            var sltTarget=document.getElementById('sltTarget');
            for(var i=0;i<sltSrc.options.length;i++)
            {
                var tempOption=sltSrc.options[i];
                if(tempOption.selected){
                    sltSrc.removeChild(tempOption);
                    sltTarget.appendChild(tempOption);
                }    
            }
        }        
    </script>
</head>
<body>
    <select ondblclick="removeItem();" id="sltSrc" multiple="true">
        <option value="a">srcA</option>
        <option value="b">srcB</option>
        <option value="c">srcC</option>
    </select>
    <select ondblclick="addItem();" id="sltTarget"  multiple="true">
        <option value="a">targetA</option>
        <option value="b">targetB</option>
        <option value="c">targetC</option>
    </select>
    <div id="showInfo"></div>
    <input type="button" value="showSelectOptions"  onclick="showSelectOptions();"/>
</body>

 链接:http://www.cnblogs.com/hanxianlong/archive/2009/03/31/1426095.html

 

 

 

  • 大小: 17.5 KB
  • 大小: 5.6 KB
分享到:
评论

相关推荐

    使用jquery实现select添加实现后台权限添加的效果

    - `$("#select1").dblclick(function () {...})`:当用户在`select1`中双击一个选项时,被选中的选项将会被添加到`select2`。这是通过`appendTo()`方法实现的,它将一个或多个DOM元素插入到另一个元素的末尾。 - `...

    jQuery实现Select左右复制移动内容

    在本文中,我们将深入探讨如何使用jQuery来实现Select元素之间的内容复制和移动功能。这个功能在许多用户界面中都有应用,比如多选设置、数据过滤等。以下是对给定代码的详细解释和扩展: 首先,我们需要引入jQuery...

    基于jquery实现select选择框内容左右移动添加删除代码分享

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动! 运行效果图:...

    两个多选select(multiple左右)添加、删除选项和取值实例

    总结来说,这个实例展示了如何使用jQuery来实现两个多选`select`元素之间的选项添加、删除以及值的传递。它利用了`select`元素的`multiple`属性、`input`元素的`hidden`类型,以及jQuery的事件监听和DOM操作功能,...

    select选择框内容左右移动添加删除.zip

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!

    jQuery双向列表选择器DIV模拟版

    同样,在单击事件`_click`中,如果按下shift键,会遍历当前列表中符合特定索引条件的元素,并为它们添加一个类(is_select),从而实现多选效果。 5. 文件内容中还提到了一些特定的类名和选择器(如.item、is_...

    基于ztree开发的下拉树控件ztree-select

    【基于ztree开发的下拉树控件ztree-select】是一种高效的前端UI组件,它结合了ztree的核心特性和下拉菜单的功能,适用于构建具有层级结构的选中项。ztree是一个广泛使用的JavaScript树形插件,而ztree-select则是其...

    Jquery实现的角色左右选择特效

    JQuery实现角色左右选择特效是一种基于JQuery库的网页交互设计技术,它允许用户通过界面操作,将选项在两个列表框之间相互转移。本技术适用于需要角色权限设置、物品分类、表单选项等多选转移的场景。 在本技术实现...

    jQuery实现下拉框左右选择的简单实例

    例如,当用户点击id为“add”的按钮时,`$('#select1 option:selected')`会选择被选中的选项,然后使用`appendTo('#select2')`将它们添加到右侧的下拉框中。同理,`$('#remove')`和`$('#remove_all')`则是将选中或...

    jquery.jstree 增加节点的双击事件代码

    具体实现时,需要先阻止默认事件,以防止其他默认行为干扰,例如页面滚动等。然后,调用一个自定义的函数处理双击事件。自定义函数"dblclick_node"需要对传入的节点对象进行处理,确认这是一个有效的节点,并执行...

    Extjs,Jquery,Dhtmlxtree之上的树

    本篇文章主要探讨了三种流行的JavaScript库——Extjs、Jquery、Dhtmlxtree中实现树形结构(Tree)的方法及其差异。树形结构在用户界面设计中扮演着重要的角色,尤其是在展现具有层级关系的数据时。下面我们将分别...

    jQuery下拉框的简单应用

    双击"select1"中的选项会将其添加到"select2",而双击"select2"中的选项则会将其移回"select1"。 通过这种方式,jQuery使得在下拉框之间移动选项变得非常简单。用户可以通过点击按钮或双击选项来实时调整选择,提高...

    jQuery.Autocomplete实现自动完成功能(详解)

    默认值是1,如果设置为0,则在输入框内双击或删除输入框内容时也会显示下拉列表。 2. width:用于指定下拉框的宽度,如果不设置,则默认为输入元素的宽度。 3. max:指定下拉列表中显示的项目数量,当项目过多时,...

    hmtl 多列选择

    如果需要在运行时动态添加或删除选项,可以使用jQuery的`.append()`和`.remove()`方法。这在需要根据用户输入或其他条件更新选择框内容的场景中非常有用。 6. **优化性能**: 对于大量选项,避免使用`.each()`...

    select选择框内容左右移动添加删除特效代码

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!

Global site tag (gtag.js) - Google Analytics