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 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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/08/18 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
selenium+python自动化测试之环境搭建
2019/01/23 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
关于毕业的中学校园广播稿
2014/01/26 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android