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


Posted in Javascript onOctober 12, 2013

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

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();
Javascript 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
js闭包学习心得总结
Apr 17 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 #Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 #Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 #Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 #Javascript
JavaScript对象学习经验整理
Oct 12 #Javascript
js修改input的type属性问题探讨
Oct 12 #Javascript
5秒后跳转到另一个页面的js代码
Oct 12 #Javascript
You might like
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
用JS实现的一个include函数
2007/07/21 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
javascript流程控制语句集合
2017/09/18 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python基本语法经典教程
2016/03/11 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python requests接口测试实现代码
2020/09/08 Python
python判断元素是否存在的实例方法
2020/09/24 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
2015年中学校长工作总结
2015/05/19 职场文书
体育教师教学随笔
2015/08/15 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技