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 相关文章推荐
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
javascript每日必学之封装
Feb 23 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP重定向的3种方式
2013/03/07 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
回顾Javascript React基础
2019/06/15 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python从零开始创建区块链
2018/03/06 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python和js交互调用的方法
2020/06/23 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
求职自我评价范文100字
2014/09/23 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
婚前协议书范本两则
2014/10/16 职场文书
旷工辞退通知书
2015/04/17 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python