怎么做微信小程序_JS与jQuery完成ListBox上移,下移

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例       这篇文章主要介绍了JS与jQuery实现ListBox上移,下移,左移,右移操作功能,涉及javascript与jQuery的事件响应、页面元素动态操作等相关实现技巧,需要的朋友可以参考下

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

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

 html 
 head 
 title Javascript版选择下拉菜单互移且排序 /title 
 meta http-equiv="Content-Type" content="text/html; charset=gb2312" 
 /head 
 body 
 p 选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。 /p 
 form method="post" name="myform" 
 table border="0" width="300" 
 td width="40%" 
 select multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)" 
 option value="北京" 北京 /option 
 option value="上海" 上海 /option 
 option value="山东" 山东 /option 
 option value="安徽" 安徽 /option 
 option value="重庆" 重庆 /option 
 option value="福建" 福建 /option 
 option value="甘肃" 甘肃 /option 
 option value="广东" 广东 /option 
 option value="广西" 广西 /option 
 option value="贵州" 贵州 /option 
 option value="海南" 海南 /option 
 option value="河北" 河北 /option 
 option value="黑龙江" 黑龙江 /option 
 option value="河南" 河南 /option 
 option value="湖北" 湖北 /option 
 option value="湖南" 湖南 /option 
 option value="内蒙古" 内蒙古 /option 
 option value="江苏" 江苏 /option 
 option value="江西" 江西 /option 
 option value="吉林" 吉林 /option 
 option value="辽宁" 辽宁 /option 
 option value="宁夏" 宁夏 /option 
 option value="青海" 青海 /option 
 option value="山西" 山西 /option 
 option value="陕西" 陕西 /option 
 option value="四川" 四川 /option 
 option value="天津" 天津 /option 
 option value="西藏" 西藏 /option 
 option value="新疆" 新疆 /option 
 option value="云南" 云南 /option 
 option value="浙江" 浙江 /option 
 option value="香港" 香港 /option 
 option value="澳门" 澳门 /option 
 option value="台湾" 台湾 /option 
 option value="其他" 其他 /option 
 /select 
 /td 
 td width="20%" align="center" 
 input type="button" value=" " br / 
 br / 
 input type="button" value=" " 
 /td 
 td width="40%" 
 select multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)" 
 /select 
 /td 
 button type="button" 
 ∧ /button 
 br / 
 button type="button" 
 ∨ /button 
 /td 
 /tr 
 /table 
 值: input type="text" name="city" size="40" 
 /form 
 script language="JavaScript" 
 function moveOption(e1, e2) {
 try {
 for (var i = 0; i e1.options.length; i++) {
 if (e1.options[i].selected) {
 var e = e1.options[i];
 e2.options.add(new Option(e.text, e.value));
 e1.remove(i);
 i = i - 1
 document.myform.city.value = getvalue(document.myform.list2);
 catch (e) { }
 alue(geto) {
 var allvalue = "";
 for (var i = 0; i geto.options.length; i++) {
 allvalue += geto.options[i].value + ",";
 return allvalue;
 function changepos(obj, index) {
 if (index == -1) {
 if (obj.selectedIndex 0) {
 obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex - 1))
 else if (index == 1) {
 if (obj.selectedIndex obj.options.length - 1) {
 obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1))
 //-- 
 /script 
 /body 
 /html 

运行效果:

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

 html 
 head 
 title Jquery版选择下拉菜单互移且排序 /title 
 meta http-equiv="Content-Type" content="text/html; charset=gb2312" 
 script src="jquery/2.0.0/jquery.min.js" /script 
 /head 
 body 
 p 选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。 /p 
 form method="post" name="myform" 
 table border="0" width="300" 
 td width="40%" 
 select multiple name="list1" id="list1" ondblclick="ListBox_Move('list1','list2')" 
 option value="北京" 北京 /option 
 option value="上海" 上海 /option 
 option value="山东" 山东 /option 
 option value="安徽" 安徽 /option 
 option value="重庆" 重庆 /option 
 option value="福建" 福建 /option 
 option value="甘肃" 甘肃 /option 
 option value="广东" 广东 /option 
 option value="广西" 广西 /option 
 option value="贵州" 贵州 /option 
 option value="海南" 海南 /option 
 option value="河北" 河北 /option 
 option value="黑龙江" 黑龙江 /option 
 option value="河南" 河南 /option 
 option value="湖北" 湖北 /option 
 option value="湖南" 湖南 /option 
 option value="内蒙古" 内蒙古 /option 
 option value="江苏" 江苏 /option 
 option value="江西" 江西 /option 
 option value="吉林" 吉林 /option 
 option value="辽宁" 辽宁 /option 
 option value="宁夏" 宁夏 /option 
 option value="青海" 青海 /option 
 option value="山西" 山西 /option 
 option value="陕西" 陕西 /option 
 option value="四川" 四川 /option 
 option value="天津" 天津 /option 
 option value="西藏" 西藏 /option 
 option value="新疆" 新疆 /option 
 option value="云南" 云南 /option 
 option value="浙江" 浙江 /option 
 option value="香港" 香港 /option 
 option value="澳门" 澳门 /option 
 option value="台湾" 台湾 /option 
 option value="其他" 其他 /option 
 /select 
 /td 
 td width="20%" align="center" 
 input type="button" value=" " br / 
 br / 
 input type="button" value=" " 
 /td 
 td width="40%" 
 select multiple name="list2" id="list2" ondblclick="ListBox_Move('list2','list1')" 
 /select 
 /td 
 button type="button" 
 ∧ /button 
 br / 
 button type="button" 
 ∨ /button 
 /td 
 /tr 
 /table 
 值: input type="text" name="city" size="40" 
 /form 
 script language="JavaScript" 
 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));
 /script 
 /body 
 /html 

运行效果:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。