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.validate分组验证代码
Mar 17 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
微信小程序 生成携带参数的二维码
Oct 23 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
浅析十款PHP开发框架的对比
2013/07/05 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
eval与window.eval的差别分析
2011/03/17 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Django中间件工作流程及写法实例代码
2018/02/06 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python画图常规设置方式
2020/03/05 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
公司同意接收函
2014/01/13 职场文书
中学生学习保证书
2015/02/26 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2016新年年会主持词
2015/07/06 职场文书
运动会报道稿大全
2015/07/23 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
小学教代会开幕词
2016/03/04 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书