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中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
JS+DIV实现拖动效果
Feb 11 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创建PowerPoint2007文档的方法
2015/12/10 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
教你安装python Django(图文)
2013/11/04 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
校长岗位职责
2013/11/26 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
人事主管岗位职责
2015/02/04 职场文书
婚宴致辞
2015/07/28 职场文书
安全伴我行主题班会
2015/08/13 职场文书
PHP基本语法
2021/03/31 PHP
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript