原生jQuery實(shí)現(xiàn)只顯示年份下拉框
更新時(shí)間：2020年12月24日 11:06:18 作者：一個(gè)月改一次yeah
這篇文章主要介紹了原生jQuery實(shí)現(xiàn)只顯示年份下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)只顯示年份下拉框的具體代碼，供大家參考，具體內(nèi)容如下
代碼:
<!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() {
//如果你想讓起始年份下拉框和結(jié)束年份下拉框都顯示從1949至今的年份,那么寫同樣的循環(huán)即可:
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>
只顯示年份的下拉框效果：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery操作select下拉框的text值和value值的方法
- 利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
- jquery multiSelect 多選下拉框
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jquery及原生js獲取select下拉框選中的值示例
- jquery獲得下拉框值的代碼
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
- jQuery實(shí)現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作示例
相關(guān)文章
下面小編就為大家?guī)硪黄猨q給頁面添加覆蓋層遮罩的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼
基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼，需要的朋友可以參考下。2011-07-07
本文是對(duì)jquery 刪除cookie失效的解決方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
jQuery中通過ajax的get()函數(shù)讀取頁面的方法
這篇文章主要介紹了jQuery中通過ajax的get()函數(shù)讀取頁面的方法,需要的朋友可以參考下2016-02-02
jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
這篇文章主要介紹了jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法,實(shí)例分析了針對(duì)jQuery中slideUp、slideDown、animate等動(dòng)畫運(yùn)用時(shí)出現(xiàn)的滯后反復(fù)執(zhí)行等問題的解決方法,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果,涉及jQuery鼠標(biāo)事件響應(yīng)及表格table動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
這篇文章給大家總結(jié)了使用jq獲取元素值的常見寫法,文中給大家介紹了詳細(xì)的代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼)
這篇文章主要介紹了jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼),需要的朋友可以參考下2014-04-04
jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕
這篇文章主要介紹了jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕,需要的朋友可以參考下2015-11-11
接下來看一段代碼，我會(huì)給大家詳細(xì)介紹DWZ中table分頁的使用方式，以下是在MVC中實(shí)現(xiàn)的方式。2013-03-03