jQuery实现两个挑选控件的互移操作
一、直接上代码
!DOCTYPE html html head meta charset=' utf-8 '/title index/title/head body div select id=' left selector ' multiple=' multiple ' name=' SmsListOnLeft ' style=' height :100 px;width :50 px ' option value=' 0 ' 0/option value=' 1 ' 1/option value=' 2 ' 2/option value=' 3 ' 3/option option value=' 4 ' 4/option value=' 5 ' 5/option/select span style=' top 3360 30px;位置:固定;'input type=' button ' value=' id=' btnLeft '/input type=' button ' value=' id=' BTN右'/span select id='右选择器' multiple=' multiple ' name=' SmsListOnRight ' style=' height :100 px;宽度:50 px左边距-:80像素选项值=' 6 ' A/选项值=' 7 ' B/选项值=' 8 ' C/选项值=' 9 ' D/选项值=' 10 ' E/选项/select /div br输入类型=' button ' onclick=' selectAll()' id=' btnseselectall ' value=' selectAll '/script src=' http 3360 js/jquery-2。1 .4 .js '/script script $(“# 1”)单击(函数(){ //数据选择权选中的数据集合赋值给变量vSelect var vSelect=$(' #左选择器选项:选中');//克隆数据添加到右选择器中vSelect.clone().appendo(' #右选择器');//同时移除左选择器中的选项vselect。移除();});//右移$(' # btnlft ').单击(function(){ var vSelect=$(' #右选择器选项:选中');vSelect.clone().appendo(' #左选择器');vselect。移除();});函数selectAll(){ var lst 1=window。文件。getelementbyid('右选择器');可变长度=lst 1。选项。长度;for(var I=0;一、长度;i ) { var v=lst1.options[i].价值;//选项内的var t=lst1.options[i]的值。文本;//显示的文本警报(v ' : ' t);} }/脚本/正文/html二、效果图
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
版权声明:jQuery实现两个挑选控件的互移操作是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。