开启辅助访问 充值VIP充值豆豆
QQ登录 自动登录 注册 找回密码
查看: 7432|回复: 0

js实现Select列表各项上移和下移的方法[javascript教程]

[复制链接]

该用户从未签到

156

主题

156

帖子

2万

豆豆

超级版主

光头春 发表于 2018-5-12 09:40:18 | 显示全部楼层 |阅读模式

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

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

运行效果如下图所示:

在线演示地址如下:

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


其它思必达学院教程推荐:
seo权重流量之实战seo视频教程
l十天学会单片机
霖锋51单片机视频教程
黑帽技术论坛黑帽SEO系列视频教程
龙书浩2012年最新原创教程–速学DIV+CSS基础教程(10课)
jQuery电子书大全
尚学堂马士兵]JDBC和MySQL视频
《C#数据库编程-ado.net基础篇》[压缩包]
《开天辟地4 》零售版(8CD)带10CD版 免费下载
《计算机网络基础》上海交大 免费下载
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

本站资源全部来自网络和网友分享,如有侵犯您的权益,请联系网站QQ,或发邮件至sibida@foxmail.com。本网站尊重知识产权,无意侵犯知识产品,如有,联系网站人员,会第一时间删除!

小白基地,是小白资源网的官方网站,思必达学院官网,提供最新的创业技术支持与创业资讯,提供最新的思必达教程。是IT小白网友学习资源分享基地,中国互助创业资源网。提供诸如JAVA、PHP、MySQL、ASP、C语言等各类程序开发的教程资源。

快速回复 返回顶部 返回列表
世界未解之谜大全 网上兼职招聘信息 南宁大学生兼职网