本文摘自PHP中文网,作者coldplay.xixi,侵删。
jQuery选择性移除列表框的方法:绑定向左的方向建按钮的click事件,当单击按钮时,右侧列表框选中的项会添加到左侧列表框中,完成移除的操作,代码为【$(this).remove().appendTo(leftSel)】。
本教程操作环境:windows7系统、jquery3.2.1版本,Dell G3电脑。
jQuery选择性移除列表框的方法:
本文将用实例来讲解使用jQuery实现左右列表框的操作,主要有以下效果:
1、通过左右按钮向右侧列表框添加项或移除项操作。
2、通过双击两边列表框里的项可以进行添加或移除项。
3、获取右侧列表框里的选项值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class = "select_side" >
<p>待选区</p>
<select id= "selectL" name= "selectL" multiple= "multiple" >
<option value= "13800138000" >王新安 - 13800138000</option>
<option value= "13800138001" >李密 - 13800138001</option>
<option value= "13800138002" >姜瑜 - 13800138002</option>
<option value= "13800138002" >钱书记 - 13800138004</option>
</select>
</div>
<div class = "select_opt" >
<p id= "toright" title= "添加" >></p>
<p id= "toleft" title= "移除" ><</p>
</div>
<div class = "select_side" >
<p>已选区</p>
<select id= "selectR" name= "selectR" multiple= "multiple" >
</select>
</div>
<div class = "sub_btn" ><input type= "button" id= "sub" value= "getValue" /></div>
|
页面由左右两个列表框以及操作按钮项组成。通过CSS来控制三者并排一行。
CSS
1 2 3 4 5 6 7 | .select_side{float:left; width:200px}
select{width:180px; height:120px}
.select_opt{float:left; width:40px; height:100%; margin-top:36px}
.select_opt p{width:26px; height:26px; margin-top:6px; background:url(arr.gif) no-repeat;
cursor:pointer; text-indent:-999em}
.select_opt p#toright{background-position:2px 0}
.select_opt p#toleft{background-position:2px -22px}
|
我设置了两个列表框都左浮动float:left,同时将操作按钮项也左浮动,主要就使得三者横向排列。值得注意是,在设置操作按钮时,我使用了一张背景图片,这张图片包括了左右两个方向箭头的按钮,如下图,然后通过background-position
来定位图片的位置,这个方法目前已经在很多网站中得到应用。
jQuery
首先,绑定向右的方向建按钮的click事件,当单击按钮时,左侧列表框选中的项会添加到右侧列表框中,完成添加的操作。
1 2 3 4 5 6 7 | var leftSel = $( "#selectL" );
var rightSel = $( "#selectR" );
$( "#toright" ).bind( "click" , function (){
leftSel.find( "option:selected" ).each( function (){
$(this).remove().appendTo(rightSel);
});
});
|
同样,绑定向左的方向建按钮的click事件,当单击按钮时,右侧列表框选中的项会添加到左侧列表框中,完成移除的操作。
1 2 3 4 5 | $( "#toleft" ).bind( "click" , function (){
rightSel.find( "option:selected" ).each( function (){
$(this).remove().appendTo(leftSel);
});
});
|
接下来,需要完成双击选择事件,当双击该项时,该项立即从该列表框中移除,并添加到与之相对的列表框中。
1 2 3 4 5 6 7 8 9 10 | leftSel.dblclick( function (){
$(this).find( "option:selected" ).each( function (){
$(this).remove().appendTo(rightSel);
});
});
rightSel.dblclick( function (){
$(this).find( "option:selected" ).each( function (){
$(this).remove().appendTo(leftSel);
});
});
|
以上代码是有点多,但是非常直观,而且非常容易理解,有了这些操作后,就能对列表框的值进行随心所欲的控制了。
相关免费学习推荐:javascript(视频)
以上就是jQuery如何选择性移除列表框的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jQuery load中文乱码怎么办
jQuery中liger ui是什么
jQuery如何删除元素
jQuery是否获得焦点
jQuery prop()和attr()区别是什么
jQuery如何添加节点?
jQuery如何判断某元素是否是数组元素
jQuery收费吗?
如何使用jQuery的插件
jQuery怎么判断对象是否存在?
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jQuery如何选择性移除列表框