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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript中this详解
Sep 01 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
深入分析javascript中console命令
Aug 14 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
layui table 参数设置方法
Aug 14 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP strtok()函数的优点分析
2010/03/02 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
javascript replace方法与正则表达式
2008/02/19 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
护理助产毕业生的求职信
2014/03/02 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
教师求职简历自我评价
2015/03/10 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
区域销售大会开幕词
2016/03/04 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS