这篇文章给大家分享的是有关JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业
联通服务器托管报价，主机托管价格性价比高，为金融证券行业服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。
先来看看Javascript版选择下拉菜单互移且排序操作：
Javascript版选择下拉菜单互移且排序
选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。
北京
上海
山东
安徽
重庆
福建
甘肃
广东
广西
贵州
海南
河北
黑龙江
河南
湖北
湖南
内蒙古
江苏
江西
吉林
辽宁
宁夏
青海
山西
陕西
四川
天津
西藏
新疆
云南
浙江
香港
澳门
台湾
其他
>" onclick="moveOption(document.myform.list1, document.myform.list2)">
|
∧
∨
|
值：
运行效果：
再来看看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));
}
})
}
}
运行效果：
JavaScript的特点
1.JavaScript主要用来向HTML页面添加交互行为。
2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。
3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。
感谢各位的阅读！关于“JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
本文标题：JS与jQuery如何实现ListBox上移,下移,左移,右移操作功能-创新互联
文章路径：
http://kswjz.com/article/gedih.html
