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

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

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

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

  
  


  
选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。
  
  
    
      
        
          北京
          上海
          山东
          安徽
          重庆
          福建
          甘肃
          广东
          广西
          贵州
          海南
          河北
          黑龙江
          河南
          湖北
          湖南
          内蒙古
          江苏
          江西
          吉林
          辽宁
          宁夏
          青海
          山西
          陕西
          四川
          天津
          西藏
          新疆
          云南
          浙江
          香港
          澳门
          台湾
          其他
        
      
      
        >" onclick="moveOption(document.myform.list1, document.myform.list2)">
        
        
      
      
        
        
      
      
        
          ∧
        
        
          ∨
      
    
  
  值：
  
  
  
  

运行效果：

再来看看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));
        }
      })
    }
  }
  

运行效果：

JavaScript的特点

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

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