jquery 遍历 html listbox,JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

本文实例讲述了JS与jQuery实现ListBox上移,下移,左移,右移操作功能。分享给大家供大家参考，具体如下：

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

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

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

北京 上海 山东 安徽 重庆 福建 甘肃 广东 广西 贵州 海南 河北 黑龙江 河南 湖北 湖南 内蒙古 江苏 江西 吉林 辽宁 宁夏 青海 山西 陕西 四川 天津 西藏 新疆 云南 浙江 香港 澳门 台湾 其他

∧ ∨

值：

运行效果：

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

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

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

北京 上海 山东 安徽 重庆 福建 甘肃 广东 广西 贵州 海南 河北 黑龙江 河南 湖北 湖南 内蒙古 江苏 江西 吉林 辽宁 宁夏 青海 山西 陕西 四川 天津 西藏 新疆 云南 浙江 香港 澳门 台湾 其他

∧ ∨

值：

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程序设计有所帮助。