JavaScript实现下拉列表框数据增加、删除、上下排序的方法


Posted in Javascript onAugust 11, 2015

本文实例讲述了JavaScript实现下拉列表框数据增加、删除、上下排序的方法。分享给大家供大家参考。具体如下:

这里实现在一个支持多选的下拉列表框内进行数据项的添加、删除、向上、向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用。

运行效果截图如下:

JavaScript实现下拉列表框数据增加、删除、上下排序的方法

具体代码如下:

<title>下拉列表数据上下排序</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function move(fbox,tbox) {
var i = 0;
if(fbox.value != "") {
var no = new Option();
no.value = fbox.value;
no.text = fbox.value;
tbox.options[tbox.options.length] = no;
fbox.value = "";
  }
}
function remove(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].selected && box.options[i] != "") {
box.options[i].value = "";
box.options[i].text = "";
  }
}
BumpUp(box);
} 
function BumpUp(abox) {
for(var i = 0; i < abox.options.length; i++) {
if(abox.options[i].value == "") {
for(var j = i; j < abox.options.length - 1; j++) {
abox.options[j].value = abox.options[j + 1].value;
abox.options[j].text = abox.options[j + 1].text;
}
var ln = i;
break;
  }
}
if(ln < abox.options.length) {
abox.options.length -= 1;
BumpUp(abox);
  }
}
function Moveup(dbox) {
for(var i = 0; i < dbox.options.length; i++) {
if (dbox.options[i].selected && dbox.options[i] != "" && dbox.options[i] != dbox.options[0]) {
var tmpval = dbox.options[i].value;
var tmpval2 = dbox.options[i].text;
dbox.options[i].value = dbox.options[i - 1].value;
dbox.options[i].text = dbox.options[i - 1].text
dbox.options[i-1].value = tmpval;
dbox.options[i-1].text = tmpval2;
   }
  }
}
function Movedown(ebox) {
for(var i = 0; i < ebox.options.length; i++) {
if (ebox.options[i].selected && ebox.options[i] != "" && ebox.options[i+1] != ebox.options[ebox.options.length]) {
var tmpval = ebox.options[i].value;
var tmpval2 = ebox.options[i].text;
ebox.options[i].value = ebox.options[i+1].value;
ebox.options[i].text = ebox.options[i+1].text
ebox.options[i+1].value = tmpval;
ebox.options[i+1].text = tmpval2;
   }
  }
}
// End -->
</script>
<form ACTION="" METHOD="POST">
<table>
<tr>
<td>
<input type="button" value="增加" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
<input type="button" value="删除" onclick="remove(this.form.list2)" name="B2"><br>
<input type="button" value="向上" onclick="Moveup(this.form.list2)" name="B3"><br>
<input type="button" value="向下" onclick="Movedown(this.form.list2)" name="B4">
</td>
<td>
<select multiple size=7 name="list2">
<option value="one">ASP</option>
<option value="two">PHP</option>
<option value="three">ASP.NET</option>
<option value="four">JAVA</option>
<option value="five">DELPHI</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="list1" value="">
</td></tr>
</table>
</form>

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

Javascript 相关文章推荐
JavaScript实现表格排序方法
Jun 14 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
canvas 实现中国象棋
Feb 17 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
iframe跨域通信封装详解
Aug 11 #Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 #Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 #Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 #Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 #Javascript
js限制文本框只能输入中文的方法
Aug 11 #Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 #Javascript
You might like
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php获取操作系统语言代码
2013/11/04 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP最常用的正则表达式
2017/02/13 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Pyqt5自适应布局实例
2019/12/13 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
python实现控制台输出颜色
2021/03/02 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
教室布置标语
2014/06/26 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
利用python调用摄像头的实例分析
2021/06/07 Python
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
java实现web实时消息推送的七种方案
2022/07/23 Java/Android