JavaScript实现动态删除列表框值的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了JavaScript实现动态删除列表框值的方法。分享给大家供大家参考。具体如下:

使用JavaScript 动态删除列表框中的值,实际运用中可能效果会比较复杂,这只是一个基本功能单元,很多都是在此基础上扩展而来,运行代码点击“删除”,会将列表框中的值一一删除,只保留一项数据。

运行效果截图如下:

JavaScript实现动态删除列表框值的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>删除选项</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function RemoveOption(Box,iNum){
 var oForm = document.forms["myForm1"];
 var oBox = oForm.elements[Box];
 oBox.options[iNum] = null; 
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球类:
<p>
<select id="ball" name="ball" multiple="multiple">
 <option value="Football">足球</option>
 <option value="Basketball">篮球</option>
 <option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="删除" onclick="RemoveOption('ball',1);" />
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
javascript 用函数实现继承详解
May 28 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
jQuery实现文件上传进度条特效
Aug 12 #Javascript
XML文件转化成NSData对象的方法
Aug 12 #Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 #Javascript
jQuery实现动态添加和删除一个div
Aug 12 #Javascript
JavaScript多线程详解
Aug 12 #Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 #Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 #Javascript
You might like
php循环输出数据库内容的代码
2008/05/24 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
jupyter notebook实现显示行号
2020/04/13 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
大专自我鉴定范文
2013/10/23 职场文书
三问三解心得体会
2014/09/05 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫