JS和jQuery实现ListBox上下左右移动的功能示例

本文利用JS和jQuery实现了ListBox的上下左右移动功能。分享给大家参考，如下：

让我们看看Javascript版本的选择下拉菜单来移动和排序彼此：

htmlhead titleJavascript版选择下拉菜单互移且排序/title meta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/流浆池p选定一项或多项然后点击添加或移除（按住变化或计算机的计算机的ctrl按键按键可以多选),或在选择项上双击进行添加和移除/p表单方法='post '名称='myform '表格边框=' 0 ' width=' 300 ' tr TD width=' 40% ' select style=' width :100 px；高度：200 px ' multiple name=' list 1 ' size=' 12 ' on bl click=' move option(文档。我的表格。清单1，文件。我的表格。列表2)“选项值=”北京'北京/option选项值='上海'上海/option选项值='山东'山东/option选项值='安徽'安徽/option选项值='重庆'重庆/option选项值='福建'福建/option选项值='甘肃'甘肃/option选项值='广东'广东/option选项值='广西'广西/option选项值='贵州'贵州/option选项值='海南'海南/option选项值='河北'河北/option选项值='黑龙江'黑龙江/option选项值='河南'河南/option选项值='湖北'湖北/option选项值='湖南'湖南/option选项值='内蒙古'内蒙古/option选项值='江苏'江苏/option选项值='江西'江西/option选项值='吉林'吉林/option选项值='辽宁'辽宁/option选项值='宁夏'宁夏/option选项值='青海'青海/option选项值='山西'山西/option选项值='陕西'陕西/option选项值='四川'四川/option选项值='天津'天津/option选项值='西藏'西藏/option选项值='新疆'新疆/option选项值='云南'云南/option选项值='浙江'浙江/option选项值='香港'香港/option选项值='澳门'澳门/option选项值='台湾'台湾/option选项值='其他'其他/option/select/TD width=' 20% ' align=' center ' input type=' button ' value=' onclick=' move option(文档。我的表格。清单1，文件。我的表格。列表2)' br/br/输入类型=' button '值=' onclick=' move选项(文档。我的表格。清单2，文件。我的表格。list 1)'/TD width=' 40% ' select style=' width :100 px；高度：200 px ' multiple name=' list 2 ' size=' 12 ' on bl click=' move option(文档。我的表格。清单2，文件。我的表格。list 1)'/select/TD按钮on click=' change pos(list 2，-1)' type=' button '/button br/button on click=' change pos(list 2，1)' type=' button '/button/TD/tr/table值：输入类型=' text ' name=' city ' size=' 40 '/表单脚本语言='JavaScript '！-函数moveOption(e1，E2){ try { for(var I=0；我是E1。选项。长度；i ) { if (e1.options[i]).选定){ var e=E1。选项[一]；e2.options.add(新的选项(e .文本，e .值))；E1。去掉(一)；I=I-1 } }文档。我的表格。城市。value=get value(文档。我的表格。清单2)；} catch (e) { } }函数getvalue(geto){ var all value=' '；for(var I=0；我有很多选择。长度；i ) { allvalue=geto.options[i].值',';}返回allvalue}函数changepos(obj，index){ if(index==-1){ if(obj。selectedindex 0){ obj。选项(对象。selectedindex ).交换节点(obj。选项(对象。selectedindex-1))} } else if(index==1){ if(obj。selectedindex obj。选项。length-1){ obj。选项(对象。selectedindex ).swapNode(obj。选项(对象。selectedindex 1))} } }/////script/body/html运行效果：

再来看看框架版选择下拉菜单互移且排序功能：

htmlhead titleJquery版选择下拉菜单互移且排序/title meta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本/head dy p选定一项或多项然后点击添加或移除（按住变化或计算机的计算机的ctrl按键按键可以多选),或在选择项上双击进行添加和移除/p表单方法='post '名称='myform '表格边框=' 0 ' width=' 300 ' tr TD width=' 40% ' select style=' width :100 px；高度：200像素多个名称='列表1 ' id='列表1 '在blclick上=' ListBox _ Move '('列表1 '，'列表2 ')选项值='北京'北京/option选项值='上海'上海/option选项值='山东'山东/option选项值='安徽'安徽/option选项值='重庆'重庆/option选项值='福建'福建/option选项值='甘肃'甘肃/option选项值='广东'广东/option选项值='广西'广西/option选项值='贵州'贵州/option选项值='海南'海南/option选项值='河北'河北/option选项值='黑龙江'黑龙江/option选项值='河南'河南/option选项值='湖北'湖北/option选项值='湖南'湖南/option选项值='内蒙古'内蒙古/option选项值='江苏'江苏/option选项值='江西'江西/option选项值='吉林'吉林/option选项值='辽宁'辽宁/option选项值='宁夏'宁夏/option选项值='青海'青海/option选项值='山西'山西/option选项值='陕西'陕西/option选项值='四川'四川/option选项值='天津'天津/option选项值='西藏'西藏/option选项值='新疆'新疆/option选项值='云南'云南/option选项值='浙江'浙江/option选项值='香港'香港/option选项值='澳门'澳门/option选项值='台湾'台湾/option选项值='其他'其他/option/select/TD width=' 20% ' align=' center '输入类型=' button '值=' onclick=ListBox _ Move '(列表1 '，'列表2 ')' br/br/输入类型=' button '值=' onclick=' ListBox _ Move '(列表2 '，'列表1 ')'/TD宽度=' 40% '选择样式=' width 3360100 px 高度：200 px '多个名称='列表2 ' id='列表2 ' on blclick=' ListBox _ Move '(列表2 '，'列表1 ')/select/TD按钮onclick=' ListBox _ Order '(列表2 '，' up ')类型=' button '/button br/button onclick=' ListBox _ Order '(列表2 '，' down ')类型=' button '/button/TD/tr/table值：输入类型=' text ' name=' city ' size=' 40 '/表单脚本语言='JavaScript '函数ListBox_Move(listfrom，list to){ var size=$(' # ' list from ' option ').size()；var sel size=$(“#”列表来自“选择的选项：”).size()；if(size0 selsize0) { $ .每个($(“#”列表来自“选择的选项：”)，函数(我，自己){ $(自己).appendTo($(“#”listto))；$(“#”列表来自“”).子代(' option:first ').attr('selected '，true)；});} }函数ListBox_Order(列表名称，操作){ var size=$(“#”列表名称“选项”).size()；var sel size=$(选择了“#”列表名称“选项：”).size()；if(size 0 selsize 0) { $ .每个($(' # '列表名称'选项：被选中')，函数(我，自己){ if(action=='up') { $(自己).prev().在($(自己)之后插入；} else if(action=='down')//down时选中多个连靠则操作没效果{ $(自有)。下一个()。在($(own))前插入；} })} }/脚本/正文/html运行效果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript表格(table)操作技巧大全》 、 《JavaScript操作DOM技巧总结》 、 《JavaScript数组操作技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript数学运算用法总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript查找算法技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文对JavaScript编程有所帮助。