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

本文实例为大家分享了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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery multiSelect 多选下拉框

    $("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText

  • jQuery+easyui中的combobox实现下拉框特效

    1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

  • 利用jQuery实现可输入搜索文字的下拉框

    利用jQuery实现可输入搜索文字的下拉框

    先看效果   功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: 复制代码 代码如下: var $xialaSELECT; $(document).ready(function(){ initXialaSelect(); initSearch(); }); var temptimeout=null; var query=""; function searchDev(key){ //if(key ==

  • jquery及原生js获取select下拉框选中的值示例

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

  • jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

  • Jquery操作下拉框(DropDownList)实现取值赋值

    1. 获取选中项: 复制代码 代码如下: 获取选中项的Value值: $('select#sel option:selected').val(); 或者 $('select#sel').find('option:selected').val(); 获取选中项的Text值: $('select#seloption:selected').text(); 或者 $('select#sel').find('option:selected').text(); 2. 获取当前选中项的索引值: 复制代码 代码

  • jquery动态加载select下拉框示例代码

    如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

  • jquery获得下拉框值的代码

    获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select 选中的索引: $("#d

  • jQuery实现监听下拉框选中内容发生改变操作示例

    本文实例讲述了jQuery实现监听下拉框选中内容发生改变操作.分享给大家供大家参考,具体如下: jQuery代码部分: <script> $(document).ready(function(){ var defaultId = "${defaultSelected}"; var defaultTime = "${timeName}"; $("select option").each(function(){ if($(this).va

随机推荐