JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能

这篇文章给大家分享的是有关JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

平坝网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。成都创新互联公司成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

先来看看Javascript版选择下拉菜单互移且排序操作:



  Javascript版选择下拉菜单互移且排序
  


  

选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。

                                     北京           上海           山东           安徽           重庆           福建           甘肃           广东           广西           贵州           海南           河北           黑龙江           河南           湖北           湖南           内蒙古           江苏           江西           吉林           辽宁           宁夏           青海           山西           陕西           四川           天津           西藏           新疆           云南           浙江           香港           澳门           台湾           其他                                >" onclick="moveOption(document.myform.list1, document.myform.list2)">                                                                                    ∧                             ∨                  值:            

运行效果:

JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能

再来看看Jquery版选择下拉菜单互移且排序功能:



  Jquery版选择下拉菜单互移且排序
  
  


  

选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。

                                     北京           上海           山东           安徽           重庆           福建           甘肃           广东           广西           贵州           海南           河北           黑龙江           河南           湖北           湖南           内蒙古           江苏           江西           吉林           辽宁           宁夏           青海           山西           陕西           四川           天津           西藏           新疆           云南           浙江           香港           澳门           台湾           其他                                >" onclick="ListBox_Move('list1','list2')">                                                                                    ∧                             ∨                  值:         function ListBox_Move(listfrom,listto)   {     var size = $("#" + listfrom + " option").size();     var selsize = $("#" + listfrom + " option:selected").size();     if(size>0 && selsize>0)     {       $.each($("#"+listfrom+" option:selected"), function(i,own){         $(own).appendTo($("#" + listto));         $("#" + listfrom + "").children("option:first").attr("selected",true);       });     }   }   function ListBox_Order(ListName,action)   {     var size = $("#"+ListName+" option").size();     var selsize = $("#"+ListName+" option:selected").size();     if(size > 0 && selsize > 0)     {       $.each($("#"+ListName+" option:selected"),function(i,own){         if(action == "up")         {           $(own).prev().insertAfter($(own));         }         else if(action == "down")//down时选中多个连靠则操作没效果         {           $(own).next().insertBefore($(own));         }       })     }   }   

运行效果:

JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能

JavaScript的特点

1.JavaScript主要用来向HTML页面添加交互行为。 2.JavaScript可以直接嵌入到HTML页面,但写成单独的js文件有利于结构和行为的分离。 3.JavaScript具有跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行。

感谢各位的阅读!关于“JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网页名称:JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能
URL标题:http://scyanting.com/article/gcpcdj.html