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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
Vue精简版风格概述
Jan 30 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
学习python (2)
2006/10/31 Python
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
PyQt5实现登录页面
2020/05/30 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
业务部主管岗位职责
2014/01/29 职场文书
小学数学教学反思
2014/02/02 职场文书
行政处罚告知书
2015/07/01 职场文书
运动会广播稿20字
2015/08/19 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server