热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JS中使用newOption()实现时间联动效果

这篇文章主要介绍了JS中使用newOption()实现时间联动效果,需要的朋友可以参考下

1、基础准备:

  先来了解下,如何运用js实现select动态添加option。

//1.动态创建select
function createSelect(){
  var mySelect = document.createElement("select");
  mySelect.id = "mySelect"; 
  document.body.appendChild(mySelect);
}
//2.添加选项option
function addOption(){
  //根据id查找对象,
  var obj=document.getElementById('mySelect');
  //添加一个选项
  obj.add(new Option("文本","值"));  //方法一:
  obj.options.add(new Option("text","value")); //方法二:
  for(var i=0;i<10;i++){
    obj.options[i]=new Option("新文本","新值");  //方法三:
  }
}
//3.删除所有选项option
function removeAll(){
  var obj=document.getElementById('mySelect');
  obj.options.length=0;
}
//4.删除一个选项option
function removeOne(){
  var obj=document.getElementById('mySelect');
  var index=obj.selectedIndex;  //index,要删除选项的序号
  obj.options.remove(index);
}
//5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;   //序号,取当前选中选项的序号
var val = obj.options[index].value;
//6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;  
var val = obj.options[index].text;
//7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;  
var val = obj.options[index]=new Option("新文本","新值");
//8.删除select
function removeSelect(){
  var mySelect = document.getElementById("mySelect");
  mySelect.parentNode.removeChild(mySelect);
}

2、时间联动实战

  时间联动的要点就是天数随月份变化,考虑闰年,口诀:四年一闰,百年不闰,四百年再闰。




  
  


  
  
  
  


总结

以上所述是小编给大家介绍的JS中使用new Option()实现时间联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • .children() 方法用于获取选中元素的所有直接子元素。此方法仅遍历DOM树的一层,如需遍历多层子元素,请使用 .find() 方法。 ... [详细]
  • 【线段树】  本质是二叉树,每个节点表示一个区间[L,R],设m(R-L+1)2(该处结果向下取整)左孩子区间为[L,m],右孩子区间为[m ... [详细]
  • 本文详细探讨了使用Python3编写爬虫时如何应对网站的反爬虫机制,通过实例讲解了如何模拟浏览器访问,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 蒜头君的倒水问题(矩阵快速幂优化)
    蒜头君将两杯热水分别倒入两个杯子中,每杯水的初始量分别为a毫升和b毫升。为了使水冷却,蒜头君采用了一种特殊的方式,即每次将第一杯中的x%的水倒入第二杯,同时将第二杯中的y%的水倒入第一杯。这种操作会重复进行k次,最终求出两杯水中各自的水量。 ... [详细]
  • 经过一年的思考,我发现自己对开发的兴趣并不浓厚,而对算法研究则更加热衷。本文将探讨开发与算法之间的本质差异,并分享我的未来学习计划。 ... [详细]
  • 周排行与月排行榜开发总结
    本文详细介绍了如何在PHP中实现周排行和月排行榜的开发,包括数据库设计、数据记录和查询方法。涉及的知识点包括MySQL的GROUP BY、WEEK和MONTH函数。 ... [详细]
  • CSS 百分比单位的取值依据是什么
    本文详细探讨了 CSS 中百分比单位的取值依据,包括不同定位方式下的包含块概念及其应用。通过具体的示例和代码,帮助读者更好地理解和掌握这一知识点。 ... [详细]
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • 本文介绍了Java编程语言的基础知识,包括其历史背景、主要特性以及如何安装和配置JDK。此外,还详细讲解了如何编写和运行第一个Java程序,并简要介绍了Eclipse集成开发环境的安装和使用。 ... [详细]
  • Leetcode学习成长记:天池leetcode基础训练营Task01数组
    前言这是本人第一次参加由Datawhale举办的组队学习活动,这个活动每月一次,之前也一直关注,但未亲身参与过,这次看到活动 ... [详细]
  • WCF类型共享的最佳实践
    在使用WCF服务时,经常会遇到同一个实体类型在不同服务中被生成为不同版本的问题。本文将介绍几种有效的类型共享方法,以解决这一常见问题。 ... [详细]
  • Bootstrap 缩略图展示示例
    本文将展示如何使用 Bootstrap 实现缩略图效果,并提供详细的代码示例。 ... [详细]
  • 本文介绍 DB2 中的基本概念,重点解释事务单元(UOW)和事务的概念。事务单元是指作为单个原子操作执行的一个或多个 SQL 查询。 ... [详细]
  • 本文详细介绍了区块链系统的架构,并附有清晰的架构图,帮助读者更好地理解区块链的工作原理和技术细节。 ... [详细]
author-avatar
小小可爱天使
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有