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知识点收藏
Feb 22 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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
怎么使 Mysql 数据同步
2006/10/09 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
Express的路由详解
2015/12/10 Javascript
json的使用小结
2016/06/08 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
Python定时执行之Timer用法示例
2015/05/27 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python netmiko模块的使用
2020/02/14 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
党员自我评议对照检查材料
2014/09/27 职场文书
少先队中队工作总结
2015/08/14 职场文书