jQuery选择性移除列表框的方法 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关jQuery选择性移除列表框的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

jQuery选择性移除列表框的方法:绑定向左的方向建按钮的点击事件,当单击按钮时,右侧列表框选中的项会添加到左侧列表框中,完成移除的操作,代码为【美元(这).remove () .appendTo (leftSel)】。

<强> jQuery选择性移除列表框的方法:

本文将用实例来讲解使用jQuery实现左右列表框的操作,主要有以下效果:

1,通过左右按钮向右侧列表框添加项或移除项操作。

2,通过双击两边列表框里的项可以进行添加或移除项。

3,获取右侧列表框里的选项值。
& lt; div类=皊elect_side"比; 　　& lt; p>待选区& lt;/p> 　　& lt;选择id=皊electL"name=皊electL"多个=癿ultiple"比; 　　https://www.yisu.com/zixun/& lt;选项值=" 13800138000 ">王新安- 13800138000 　　<选项值=" 13800138001 ">李密- 13800138001 　　<选项值=" 13800138002 ">姜瑜- 13800138002 　　<选项值=" 13800138002 ">钱书记- 13800138004 　　　　

已选区　　<选择id=" selectR " name=" selectR多个=岸喔觥? 　　　　

页面由左右两个列表框以及操作按钮项组成。通过CSS来控制三者并排一行。CSS

.select_side{浮动:左;宽度:200 px} 　　选择{宽度:180 px;身高:120 px} 　　.select_opt{浮动:左;宽度:40像素;高度:100%;margin-top: 36 px} 　　.select_opt p{宽度:26 px;高度:26 px;margin-top: 6 px;背景:url (arr.gif)不再重演; 　　光标:指针;indent: -999 em} 　　.select_opt p #到右{背景位置:2 px 0} 　　.select_opt p # toleft{背景位置:2 px -22 px}

我设置了两个列表框都左浮浮动:左,同时将操作按钮项也左浮动,主要就使得三者横向排列。值得注意是,在设置操作按钮时,我使用了一张背景图片,这张图片包括了左右两个方向箭头的按钮,如下图,然后通过<代码>背景位置>

jQuery首先,绑定向右的方向建按钮的点击事件,当单击按钮时,左侧列表框选中的项会添加到右侧列表框中,完成添加的操作。

var leftSel=$ (“# selectL"); 　　var rightSel=$ (“# selectR"); 　　$ (“# toright") .bind (“click",函数(){ 　　leftSel.find(“选项:selected") . each函数(){ 　　美元(这).remove () .appendTo (rightSel); 　　}); 　　});

同样,绑定向左的方向建按钮的点击事件,当单击按钮时,右侧列表框选中的项会添加到左侧列表框中,完成移除的操作。

“# toleft" .bind(美元“click"、功能(){ 　　rightSel.find(“选项:selected") . each函数(){ 　　美元(这).remove () .appendTo (leftSel); 　　}); 　　});

接下来,需要完成双击选择事件,当双击该项时,该项立即从该列表框中移除,并添加到与之相对的列表框中。

leftSel.dblclick(函数(){ 　　(美元);“选项:selected" each(函数(){ 　　美元(这).remove () .appendTo (rightSel); 　　}); 　　}); 　　rightSel.dblclick(函数(){ 　　(美元);“选项:selected" each(函数(){ 　　美元(这).remove () .appendTo (leftSel); 　　}); 　　});

关于jQuery选择性移除列表框的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。