原生jQuery实现只显示年份下拉框


Posted in jQuery onDecember 24, 2020

本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
  <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
</head>
<body>
 <div id="main" style="width: 600px;height:400px;"></div>
 <select name="" id="start" onchange="chooseYear2()">
  <option value="">1949</option>
 </select>

 <select name="" id="end"> 
 <option value=""></option>
 </select>

 <script type="text/javascript">
  var date = new Date();
  var y = date.getFullYear()
  function chooseYear1() {
   for (let i = 1949; i<=y; i ++) {
    let start = document.getElementById("start");
    let year = Number(start.lastElementChild.innerHTML) + 1;
    var myOption = document.createElement("option");
    myOption.innerHTML = year;
    start.appendChild(myOption);
   }
  }
  chooseYear1();
  function chooseYear2() {
  //如果你想让起始年份下拉框和结束年份下拉框都显示从1949至今的年份,那么写同样的循环即可:
   let end = Number($("#start").find("option:selected").val());
   let start = document.getElementById("end");
   start.firstElementChild.innerHTML=end;
   var myOption = document.createElement("option");
   for (let i = end; i<=y; i ++) {
    let start = document.getElementById("end");
    let year = Number(start.lastElementChild.innerHTML) + 1;
    var myOption = document.createElement("option");
    myOption.innerHTML = year;
    start.appendChild(myOption);
   }
  }
 </script>
</body>
</html>

只显示年份的下拉框效果:

原生jQuery实现只显示年份下拉框

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
You might like
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
建筑工程专业学生的自我评价
2013/12/25 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
秦兵马俑导游词
2015/02/02 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
独生子女证明范本
2015/06/19 职场文书