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 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
php浏览历史记录的方法
2015/03/10 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
个人委托书怎么写
2014/04/04 职场文书
门前三包责任书
2014/04/15 职场文书
如何写早恋检讨书
2014/09/10 职场文书
师德师风剖析材料
2014/09/30 职场文书
2015元旦节寄语
2014/12/08 职场文书
师德师风事迹材料
2014/12/20 职场文书
学雷锋倡议书
2015/01/19 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
《司马光》教学反思
2016/02/22 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python