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 学习技巧总结
May 21 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
JavaScript中的高级函数
Jan 04 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
ES6字符串的扩展实例
Dec 21 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
php读取3389的脚本
2014/05/06 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Django的session中对于用户验证的支持
2015/07/23 Python
python实现识别相似图片小结
2016/02/22 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
python计算两个数的百分比方法
2018/06/29 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
详解python中的异常捕获
2020/12/15 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
本科生详细的自我评价
2013/09/19 职场文书
运动会广播稿20字
2014/02/18 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
新教师个人总结
2015/02/06 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS