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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
JS实现简易计算器
2020/02/14 Javascript
python处理multipart/form-data的请求方法
2018/12/26 Python
学习python的前途 python挣钱
2019/02/27 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
python中selenium库的基本使用详解
2020/07/31 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
初中物理教学反思
2014/01/14 职场文书
歌唱比赛主持词
2014/03/18 职场文书
小学一年级语文教学反思
2016/03/03 职场文书