js实现Select列表各项上移和下移的方法

2019-11-20 11:49:39

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现Select列表各项上移和下移的方法。分享给大家供大家参考。具体如下：

这里介绍Select列表各项上移和下移的Js代码，可以手功排序，以前我们都见到过的，从事WEB编程的朋友经常会用得到。

运行效果如下图所示：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-select-move-up-down-codes/

具体代码如下：

<html><head><title>Select列表各项上移和下移</title><script>function move(index,to) {var list = document.form.list;var total = list.options.length-1;if (index == -1) return false;if (to == +1 && index == total) return false;if (to == -1 && index == 0) return false;var items = new Array;var values = new Array;for (i = total; i >= 0; i--) {items[i] = list.options[i].text;values[i] = list.options[i].value;}for (i = total; i >= 0; i--) {if (index == i) {list.options[i + to] = new Option(items[i],values[i + to], 0, 1);list.options[i] = new Option(items[i + to], values[i]);i--;}else {list.options[i] = new Option(items[i], values[i]);  }}list.focus();}function submitForm() {var list = document.form.list;var theList = "?";for (i = 0; i <= list.options.length-1; i++) { theList += "list" + list.options[i].value + "=" + list.options[i].text;if (i != list.options.length-1) theList += "&";}location.href = document.form.action + theList;}</script></head><body><form method="GET" action="" name="form"><table><tr><td align="middle"><select name="list" size="4"><option value="1">ASP</option><option value="2">PHP</option><option value="3">JSP</option><option value="4">JAVA</option></select><br><br><input type="button" value="submit" onClick="submitForm()"></td><td valign="top"><input type="button" value="↑" onClick="move(this.form.list.selectedIndex,-1)"><br><br><input type="button" value="↓"onClick="move(this.form.list.selectedIndex,+1)"></td></tr></table></form></body></html>

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

上一篇：Jquery全选与反选点击执行一次的解决方案

下一篇：innerHTML中标签可以换行的方法汇总