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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
JavaScript正则表达式和级联效果
Sep 14 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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添加MySQL数据记录代码
2008/06/07 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python使用爬虫猜密码
2016/02/19 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
培训讲师邀请函
2014/01/10 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
常务副总经理任命书
2014/06/05 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
答辩状格式范本
2015/05/22 职场文书
学校食堂管理制度
2015/08/04 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书