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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
详解layui中的树形关于取值传值问题
Jan 16 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 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 危险函数解释 分析
2009/04/22 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP Session机制简介及用法
2014/08/19 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
python中管道用法入门实例
2015/06/04 Python
python中zip()方法应用实例分析
2016/04/16 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python的垃圾回收机制详解
2019/08/28 Python
浅析matlab中imadjust函数
2020/02/27 Python
浅析python标准库中的glob
2020/03/13 Python
经济贸易系毕业生求职信
2014/05/31 职场文书
2014年团支部工作总结
2014/11/17 职场文书
音乐之声观后感
2015/06/04 职场文书
图书借阅制度范本
2015/08/06 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript