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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
Sea.JS知识总结
May 05 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
js实现详情页放大镜效果
Oct 28 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 PDO中文乱码解决办法
2009/07/20 PHP
写出高质量的PHP程序
2012/02/04 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
php数组分页实现方法
2016/04/30 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
webpack3之loader全解析
2017/10/26 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
linux下安装easy_install的方法
2013/02/10 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python turtle库的画笔控制说明
2020/06/28 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
火箭队口号
2014/06/18 职场文书
经营目标管理责任书
2014/07/25 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
公司年会主持词范文!
2019/05/07 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL