原生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 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
用JS实现的一个include函数
2007/07/21 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
flask 实现token机制的示例代码
2019/11/07 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
人力资源管理毕业生自荐信
2013/11/21 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
售后服务承诺函格式
2015/01/21 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
pandas 实现将NaN转换为None
2021/05/14 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android