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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
vue调用语音播放的方法
Sep 27 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
PHP连接access数据库
2008/03/27 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
xtree.js 代码
2007/03/13 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python实现flappy bird小游戏
2018/12/24 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
如何基于python实现不邻接植花
2020/05/01 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
文化宣传方案
2014/03/13 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2016年少先队活动总结
2016/04/06 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python