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 相关文章推荐
javascript返回顶部效果(自写代码)
Jan 06 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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 smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python切片工具pillow用法示例
2018/03/30 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python selenium firefox使用详解
2019/02/26 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python如何进入交互模式
2020/07/06 Python
如何编写python的daemon程序
2021/01/07 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
见习报告格式要求
2014/11/04 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
统招统分证明
2015/06/23 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
利用python做数据拟合详情
2021/11/17 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL