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实现在同一窗口浏览图片
Sep 17 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 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字符串截取问题
2006/11/28 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
js保留两位小数使用toFixed实现
2013/07/29 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
浅谈node的事件机制
2017/10/09 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
vue仿ios列表左划删除
2019/09/26 Javascript
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python随机函数random()使用方法小结
2018/04/29 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python pillow模块使用方法详解
2019/08/30 Python
django使用channels实现通信的示例
2020/10/19 Python
临床医学大学生求职信
2013/09/28 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
会计人员岗位职责
2014/03/19 职场文书
应届生求职信
2014/05/31 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
关于教师节的广播稿
2015/08/19 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
总结Python使用过程中的bug
2021/06/18 Python
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python