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


Posted in Javascript onAugust 14, 2015

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

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

运行效果如下图所示:

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

在线演示地址如下:

具体代码如下:

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

Javascript 相关文章推荐
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
js实现日期级联效果
Jan 23 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 #Javascript
jQuery编程中的一些核心方法简介
Aug 14 #Javascript
CSS图片响应式 垂直水平居中
Aug 14 #Javascript
js实现选中复选框文字变色的方法
Aug 14 #Javascript
avalon js实现仿微博拖动图片排序
Aug 14 #Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 #Javascript
freemarker判断对象是否为空的方法
Aug 13 #Javascript
You might like
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python存取XML的常见方法实例分析
2017/03/21 Python
Python全排列操作实例分析
2018/07/24 Python
python 画函数曲线示例
2019/12/04 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python内存映射文件读写方式
2020/04/24 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
python中的sys模块和os模块
2022/03/20 Python