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


Posted in Javascript onDecember 10, 2018

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、时间联动实战

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>日期和年份月份联动demo</title>
</head>
<body>
  <select id="year">
    <option value="">请选择年份</option>
  </select>
  <select id="month">
    <option value="">请选择月份</option>
  </select>
  <select id="day">
    <option value="">请选择日期</option>
  </select>
  <script>
    var year = document.getElementById("year");
    var month = document.getElementById("month");
    var day = document.getElementById("day");
    var y = new Date().getFullYear();
    //前后均有
    for (i = (y - 30); i < (y + 30); i++) {
      year.options.add(new Option(i + "年", i));
      //格式不要写错,不要写成add(new Option(i + "年"), i)。
    }
    //只写前或者后
    // for(var i=y;i>1977;i--){
    //   year.options[y+1-i]=new Option(i+"年",i);//索引是options[],增加是new option(text,value)
    // }
    for (i = 1; i < 13; i++) {
      month.options.add(new Option(i + "月", i));
    }
    var d = function () {
      day.length = 1; //初始化
      if (year.value == " " || month.value == " ") {
        return;
      } else {
        var Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        if ((year.value % 4 == 0 && year.value % 100 != 0) || year.value % 400 == 0) {
          Days[1]++; //判断为闰年,二月天数加一
        }
        for (i = 1; i <= Days[month.value - 1]; i++) {
          day.options.add(new Option((i + "日"), i));
        }
      }
    }
    //刷新日期天数
    year.onchange = function () {
      d();
    }
    month.onchange = function () {
      d();
    }
  </script>
</body>
</html>

总结

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

Javascript 相关文章推荐
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
微信小程序保存多张图片的实现方法
Mar 05 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 #Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 #Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 #Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
微信小程序实现动态获取元素宽高的方法分析
Dec 10 #Javascript
PM2自动部署代码步骤流程总结
Dec 10 #Javascript
vue路由前进后退动画效果的实现代码
Dec 10 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php文件下载处理方法分析
2015/04/22 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
设备技术员岗位职责
2015/04/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书
公司行政管理制度范本
2015/08/05 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
详解Python常用的魔法方法
2021/06/03 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫