javascript  删除select中的所有option的实例


Posted in Javascript onSeptember 17, 2017

javascript  删除select中的所有option的实例

方法一:

function DeleteOptions() 
  { 
    var obj = document.getElementsByTagName("select")[0]; 
    var selectOptions = obj.options; 
    var optionLength = selectOptions.length; 
    for(var i=0;i <optionLength;i++) 
    { 
      obj.removeChild(selectOptions[0]); 
    } 
  }

方法二:(那右边的Select中的所有option移到左边的Select) 

function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').length; 
    var TempText; 
    var TempValue; 
    for(var i=0;i<columnlength;i++){ 
      TempText=$('queryColumn').options[i].text; 
      TempValue=$('queryColumn').options[i].value; 
      $('queryColumn').remove(i); 
      $('SearchqqueryColumn').options.add(new Option(TempText,TempValue)); 
    } 
  }

 以上两个方法都不够好!因为它们一次性都册除不了,因为删除了一个它的$('queryColumn')在option的序号就变了!
都好的方法是:

$('SearchqqueryColumn').options.length = 0;

 或:

<script> 
function clearOption() 
{ 
  document.getElementById("testSelect").options.length = 0; 
} 
</script>

 (那右边的Select中的所有option移到左边的Select)实现如下:

function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').options.length; 
    var TempText; 
    var TempValue; 
    for(var i=0;i<columnlength;i++){ 
      TempText=$('queryColumn').options[i].text; 
      TempValue=$('queryColumn').options[i].value; 
      $('SearchqqueryColumn').options.add(new Option(TempText,TempValue)); 
    } 
    $('queryColumn').options.length = 0; 
  }

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript基础教程之变量
Jan 18 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
学习vue.js条件渲染
Dec 03 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
js前端图片加载异常兜底方案
Jun 21 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
基于js的变量提升和函数提升(详解)
Sep 17 #Javascript
利用express启动一个server服务的方法
Sep 17 #Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 #Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 #Javascript
You might like
URL Rewrite的设置方法
2007/01/02 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python爬取个性签名的方法
2018/06/17 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python Django view 两种return的实现方式
2020/03/16 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
运动会广播稿200字
2014/01/15 职场文书
银行办理业务介绍信
2014/01/18 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
元旦获奖感言
2014/03/08 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python