服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - jquery - 原生jQuery实现只显示年份下拉框

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

2021-12-18 17:55一个月改一次yeah jquery

这篇文章主要介绍了原生jQuery实现只显示年份下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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实现只显示年份下拉框

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/weixin_42952297/article/details/111567326

延伸 · 阅读

精彩推荐
  • jqueryjQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

    jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

    这篇文章主要介绍了jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考...

    Schieber11822022-01-11
  • jqueryjquery插件实现搜索历史

    jquery插件实现搜索历史

    这篇文章主要为大家详细介绍了jquery插件实现搜索历史,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    阿飞超努力8462022-03-09
  • jqueryjQuery treeview树形结构应用

    jQuery treeview树形结构应用

    这篇文章主要为大家详细介绍了jQuery treeview树形结构应用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Lqq77s9342022-02-20
  • jqueryjquery实现穿梭框功能

    jquery实现穿梭框功能

    这篇文章主要为大家详细介绍了jquery实现穿梭框功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    陈涛辉8412022-01-04
  • jqueryjquery插件实现图片悬浮

    jquery插件实现图片悬浮

    这篇文章主要为大家详细介绍了jquery插件实现图片悬浮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    阿飞超努力5802022-03-03
  • jqueryjQuery实现本地存储

    jQuery实现本地存储

    这篇文章主要为大家详细介绍了jQuery实现本地存储,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    李大璟10682021-12-16
  • jqueryjQuery实现鼠标拖动图片功能

    jQuery实现鼠标拖动图片功能

    这篇文章主要介绍了jQuery实现鼠标拖动图片功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...

    lucascube5812022-02-10
  • jqueryjQuery是用来干什么的 jquery其实就是一个js框架

    jQuery是用来干什么的 jquery其实就是一个js框架

    jQuery是一bai个简洁而快速的JavaScript库,可用于du简化zhi事件处理,HTML文档遍历,Ajax交互和dao动画,以更快速开发网站...

    jQuery教程网8842022-01-17