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

前端技术 2023/09/01 JavaScript

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

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

运行效果如下图所示：

在线演示地址如下：

http://demo.phpstudy.net/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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/2357

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案