大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能-创新互联

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

创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业联通服务器托管报价,主机托管价格性价比高,为金融证券行业服务器托管,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

先来看看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上移,下移,左移,右移操作功能-创新互联
网站链接:http://dzwzjz.com/article/gedih.html
在线咨询
服务热线
服务热线:028-86922220
TOP