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 相关文章推荐
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
浅析vue component 组件使用
Mar 06 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
详解微信UnionID作用
May 15 Javascript
vue实现搜索功能
May 28 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
清除输入框内的空格
2016/12/21 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
python执行get提交的方法
2015/04/29 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python 函数返回值的示例代码
2019/03/11 Python
深入解析神经网络从原理到实现
2019/07/26 Python
毕业生自我鉴定
2013/11/05 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
四个太阳教学反思
2014/02/01 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
如何写通讯稿
2015/07/22 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书