原生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+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
关于php循环跳出的问题
2013/07/01 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
寻找网站后台地址的python脚本
2014/09/01 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
py-charm延长试用期限实例
2019/12/22 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
Linux文件系统类型
2012/02/15 面试题
自荐信的五个重要部分
2013/10/29 职场文书
学校创先争优活动总结
2014/08/28 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python