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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
微信小程序中weui用法解析
Oct 21 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学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
vue项目实战总结篇
2018/02/11 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
vue抽出组件并传值实例
2020/07/31 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
Python 中的 else详解
2016/04/23 Python
python类中super()和__init__()的区别
2016/10/18 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python检测网络延迟的代码
2018/05/15 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python发送邮件实现基础解析
2020/08/14 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
乡镇一岗双责责任书
2015/01/29 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers