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

赞 (0)

相关推荐

  • JS实现为排序好的字符串找出重复行的方法

    本文实例讲述了JS实现为排序好的字符串找出重复行的方法.分享给大家供大家参考,具体如下: 实现这样一个需求,在一个Editplus文档中,有很多行10位的数字,这些数字已经排好序了. 比如: 1234567890 1234567891 1234567892 1234534124 1234614124 4321412414 5636373573 有什么办法能方便的找出两行至少前7位相同的数字吗? 比如,上面的数字中,能够找出 1234567890 1234567891 1234567892 <!D

  • JavaScript实现快速排序的方法

    本文实例讲述了JavaScript实现快速排序的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <script> function quickSort(input) { if (input.length <= 1) return input; var pivot = Math.floor(Math.random()*input.length) var less = [], greater=[]; var pivotElem = inpu

  • 几种经典排序算法的JS实现方法

    一.冒泡排序 function BubbleSort(array) { var length = array.length; for (var i = length - 1; i > 0; i--) { //用于缩小范围 for (var j = 0; j < i; j++) { //在范围内进行冒泡,在此范围内最大的一个将冒到最后面 if (array[j] > array[j+1]) { var temp = array[j]; array[j] = array[j+1]; arra

  • 数据结构中的各种排序方法小结(JS实现)

    新技术一直在不断变化,掌握一些基础是未来学习不断更新的技术的坚实基础.近来闲来无事,为了温习一下从前学的数据结构,将数据结构中的排序算法用JS实现了一遍,并在本文末尾处嵌入了DEMO. 简单排序 冒泡排序 冒泡排序是最简单排序算法,时间复杂度为n的平方,代码如下: function bubbleSort(array) { for (var i = 0; i < array.length; i++) { for (var j = array.length; j > 0; j--) { if (a

  • JavaScript sort数组排序方法和自我实现排序方法小结

    JavaScript sort数组排序方法和自我实现排序方法小结

     前言 针对一个数组进行排序,一个很常见的需求.尤其在后端.当然,前端也是有这个需求的. 当然,数组排序,是有现成的方法的.就是sort()方法. 我们先开看下这个. 标准答案,sort方法 var arr = [45,98,67,57,85,6,58,83,48,18]; console.log('原数组'); console.log(arr); console.log('sort方法从小到大排序'); console.log(arr.sort(function(a,b){return a-b

  • js实现汉字排序的方法

    本文实例讲述了js实现汉字排序的方法.分享给大家供大家参考.具体如下: <script type="text/javascript"> <!-- function startSort(){ var a=document.getElementById('s').value; a=a.split(',') a.sort(); document.getElementById('r1').value=a; a.sort(function(a,b){return a.local

  • 基于JS实现数字+字母+中文的混合排序方法

    基于JS实现数字+字母+中文的混合排序方法

    在上篇文章给大家介绍了JavaScript sort数组排序方法和自我实现排序方法小结,用自己的方法实现了数字数组的排序. 当然,实际运用中,我还是会使用sort方法更加方便.但是,我上一篇博文,仅仅是实现了数字排序,而srot方法默认可是能给字母实现排序的哦!而我的代码只能排序数字,看起来还是弱弱的. 所以,我得加上能排字母甚至中文的排序方法. 实现代码 $(function(){ var arr = ["Jack","Book","Fung"

  • JavaScript对象数组的排序处理方法

    本文实例讲述了JavaScript对象数组的排序处理方法.分享给大家供大家参考,具体如下: javascript的数组排序函数 sort方法,默认是按照ASCII 字符顺序进行升序排列. arrayobj.sort(sortfunction); 参数:sortFunction 可选项.是用来确定元素顺序的函数的名称.如果这个参数被省略,那么元素将按照 ASCII 字符顺序进行升序排列. sort 方法将 Array 对象进行适当的排序:在执行过程中并不会创建新的 Array 对象. 如果为 so

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

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

    本文实例讲述了JavaScript实现下拉列表框数据增加.删除.上下排序的方法.分享给大家供大家参考.具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加.删除.向上.向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用. 运行效果截图如下: 具体代码如下: <title>下拉列表数据上下排序</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function

  • Python列表常见操作详解(获取,增加,删除,修改,排序等)

    本文实例讲述了Python列表常见操作.分享给大家供大家参考,具体如下: 列表是由一系列按特定顺序排列的元素组成的对象.因为列表通常包含多个元素, 所以建议给列表指定一个表示复数的名称. 我们用方括号( [] ) 来表示列表, 并用逗号来分隔其中的元素. types=['娱乐','体育','科技'] print(types) 运行结果: ['娱乐', '体育', '科技'] 可以看到,打印列表的同时,也会将方括号打印出来. 1 获取元素 要获取列表中的某个元素, 在方括号内指定元素的索引即可:

  • Django中对数据查询结果进行排序的方法

    在你的 Django 应用中,你或许希望根据某字段的值对检索结果排序,比如说,按字母顺序. 那么,使用 order_by() 这个方法就可以搞定了. >>> Publisher.objects.order_by("name") [<Publisher: Apress>, <Publisher: O'Reilly>] 跟以前的 all() 例子差不多,SQL语句里多了指定排序的部分: SELECT id, name, address, city,

  • json格式数据的添加，删除及排序方法

    本文实例讲述了json格式数据的添加,删除及排序方法.分享给大家供大家参考,具体如下: js数据格式和json数据格式,各有各的用处,就个人而言,json更好用一点,js自身的数组和对像限制比较多. 以js的数组举例: var a = ['1']; a[5] = 52; a.length //这儿的结果是6,也就是说,中间的key会自动补全,而值呢,是undefined 一.添加和删除 1.一维数组 test = {}; //空json对像 test['firstname'] = "tank&q

  • jQuery增加和删除表格项目及实现表格项目排序的方法

    jQuery增加和删除表格项目及实现表格项目排序的方法

    增加和删除行 jquery对表格的操作是老生常谈的问题.最近项目中用到了,今天在这里分享一下! 效果大体如下: 分享一下代码吧! html <div class="table-responsive" id="Bk_table" style="display:none;"> <table class="table table-hover table-bordered"> <thead> <

  • c++ STL之list对结构体的增加,删除,排序等操作详解

    c++ STL之list对结构体的增加,删除,排序等操作详解

    对STL中的list进一步学习,编程过程中对结构体的操作很多. 全部代码如下: /* Project:list对结构体的使用 Date: 2018/07/14 Author: Frank Yu 常用函数:int size() 返回容器元素个数:bool empty() 判断容器是否为空,true为空: 增加函数:void push_back(元素) 尾元素后增加一个元素:push_front(元素) 首元素前增加一个元素: iterator insert(lit,元素)在迭代器指针lit前插入元

  • JavaScript对JSON数据进行排序和搜索

    在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序.搜索等,而不是通过AJAX请求由数据库进行这些操作. 今天我就教给大家如何使用数组的方法来实现这些操作: /*假设json就是后台传过来的json数据*/ var test=[ { price:15, id:1, description:'这是第一个数据' },{ price:30, id:3, description:'这是第二个数据' },{ pri

  • javascript实现动态增加删除表格行(兼容IE/FF)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>动态增删表格行</title> <script language="JavaScript"> <!-- //author: 

  • JavaScript数组Array对象增加和删除元素方法总结

    本文实例总结了JavaScript数组Array对象增加和删除元素方法.分享给大家供大家参考.具体分析如下: pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 undefined. shift 方法 移除数组中的第一个元素并返回该元素. arrayObj.shift( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 shift 方法可移除数组中的第一

  • 在Javascript操作JSON对象，增加 删除 修改的简单实现

    在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { teacher: [ { name: "jordan", sex: "m", age: "40" }, { name: "bryant", sex: "m", age: "28" }, {

随机推荐