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 清除输入框中的数据
Apr 13 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 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
session 的生命周期是多长
2006/10/09 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
原生js生成图片验证码
2020/10/11 Javascript
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
this关键字的含义
2015/04/08 面试题
应届医学毕业生求职信分享
2013/12/02 职场文书
学校门卫管理制度
2014/01/30 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
公证书样本
2014/04/10 职场文书
药店促销活动策划方案
2014/08/24 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
公司处罚决定书
2015/06/24 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
详解python网络进程
2021/06/15 Python