JavaScript如何从listbox里同时删除多个项目

要从列表框同时删除多个项目，我们不能从上到下的删除，因为上面的项目每删除一个，下面的项目的索引号就会变化，所以只能从下向上删除，这样就不会出现索引号乱变的问题了。

html代码


代码如下:

<table>
<tr>
<td align="center">
<select id="lsbox" name="lsbox" size="10" multiple>
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">China</option>
<option value="4">Italy</option>
<option value="5">Germany</option>
<option value="6">Canada</option>
<option value="7">France</option>
<option value="8">United Kingdom</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<button onclick="listbox_remove('lsbox');">Delete</button>
<button onclick="window.location.reload();">Reset</button>
</td>
</tr>
</table>

javascript代码如下：


代码如下:

function listbox_remove(sourceID) {
//get the listbox object from id.
var src = document.getElementById(sourceID);

//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count--) {

//if the option is selected, delete the option
if(src.options[count].selected == true) {

try {
src.remove(count, null);

} catch(error) {

src.remove(count);
}
}
}
}

当然，如果使用jQuery来删除，那就方便了，一句话就搞定了


代码如下:

$("#sourceId").find('option:selected').remove();

赞 (0)

相关推荐

  • 用JavaScript实现类似于ListBox功能示例代码

    JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据: 复制代码 代码如下: <span style="font-size:14px;">{ "Table": [ { "Id": 3, "Type": "X", "Content": &

  • js 获取Listbox选择的值的代码

    复制代码 代码如下: <script type="text/javascript"> function GetValue() { var strlist = document.getElementById("ListBox1");//获取Listbox var str= ""; //遍历Listbox,取得选中项的值 if (strlist.options.length > 0) { for (var i = 0; i <

  • JS ListBox的简单功能实现代码

    JS ListBox的简单功能实现代码

    页面效果如下:代码也贴出来跟大家分享: 美元/英镑 美元/港币 美元/新加坡元 美元/日元 美元/加拿大元 美元/欧元 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript控制两个列表框listbox左右交换数据的方法

    本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动 复制代码 代码如下: function listbox_moveacross(sourceID, destID) {     var src = document.getElementById(sourceID);     var dest = document.getEl

  • 使用javascript实现ListBox左右全选,单选,多选,全请

    复制代码 代码如下: <html><head>    <meta http-equiv="Content-Type " content="text/html;   charset=gb2312 ">    <title>list测试</title></head><body>    <div style="font-size: 10pt;">      

  • JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法.分享给大家供大家参考.具体分析如下: 通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值. function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) {

  • javascript实现listbox左右移动实现代码

    javascript实现listbox左右移动实现代码

    1. html部分: 复制代码 代码如下: <table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460" align="left" borderColorLight="#000000" border="1"> <tr bgColor="#cccccc

  • JavaScript控制listbox列表框的项目上下移动的方法

    本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以控制listbox内的元素向上或者向下移动,这个功能非常有用.下面是详细的代码 复制代码 代码如下: function listbox_move(listID, direction) {     var listbox = document.getElementById(listID);     var selIndex = listbox.selectedInd

  • 基于javascript实现listbox左右移动

    基于javascript实现listbox左右移动

    本文实例讲解了javascript实现listbox左右移动的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>listbox左右移动</title> </head> <body> &

  • JavaScript如何从listbox里同时删除多个项目

    要从列表框同时删除多个项目,我们不能从上到下的删除,因为上面的项目每删除一个,下面的项目的索引号就会变化,所以只能从下向上删除,这样就不会出现索引号乱变的问题了. html代码 复制代码 代码如下: <table> <tr> <td align="center"> <select id="lsbox" name="lsbox" size="10" multiple> <op

  • 怎样用Javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数,并返回接受剩余的参数而且返回结果的新函数的技术.其由数学家Haskell Brooks Curry提出,并以curry命名. 概念往往都是干涩且难懂的,让我们用人话来解释就是:如果我们不确定这个函数有多少个参数,我们可以先给它传入一个参数,然后通过JS闭包(如若不懂JS闭包,请先学

  • javascript实现表格信息增添与删除

    JavaScript入门 JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已经嵌入了JavaScript引擎,JavaScript源代码可以再浏览器中直接被解释执行,用户不用担心支持问题,这是一个js入门的小练习 对于表格信息的增添与删除 简单的DOM操作html标签即可实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch

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

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

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

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

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

  • javascript实现设置、获取和删除Cookie的方法

    本文实例讲述了javascript实现设置.获取和删除Cookie的方法.分享给大家供大家参考.具体实现方法如下: /* *设置Cookie * * name:cookie所对应的键 * value:cookie所对应的值 * expires:cookie所对应的有效时间 * path:指定可访问cookie的路径 * domain:指定可访问cookie的主机名 * secure:安全性 */ function setCookie (name,value,expires,path,domain

  • javascript中利用柯里化函数实现bind方法【推荐】

    • 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: • 柯里化函数主要起到预处理的作用: • bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @par

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

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

  • JavaScript偏函数与柯里化实例详解

    本文实例讲述了JavaScript偏函数与柯里化.分享给大家供大家参考,具体如下: 到目前为止我们仅讨论绑定this,现在让我们更深入学习. 我们不仅能绑定this,也可以是参数,这较少使用,但有时很方便. bind完整的语法为: let bound = func.bind(context, arg1, arg2, ...); 可以绑定上下文this和函数的初始参数.举例,我们有个乘法函数mul(a,b): function mul(a, b) { return a * b; } 我们可以在该函

随机推荐