原生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至今的年份,那么寫(xiě)同樣的循環(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>
只顯示年份的下拉框效果:
以上就是本文的全部?jī)?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)聽(tīng)下拉框選中內(nèi)容發(fā)生改變操作示例
相關(guān)文章
jquery實(shí)現(xiàn)移動(dòng)端懸浮拖拽框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)移動(dòng)端懸浮拖拽框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02Jquery獲取radio選中值實(shí)例總結(jié)
在本篇文章里小編給大家分享了關(guān)于Jquery獲取radio選中值實(shí)例總結(jié)內(nèi)容,有興趣的朋友們可以學(xué)習(xí)下。2019-01-01jQuery 通過(guò)事件委派一次綁定多種事件,以減少事件冗余
jQuery的最大特色之一就是方法連綴寫(xiě)法,這樣的書(shū)寫(xiě)方式使得閱讀起來(lái)更加方便。2010-06-06jQuery Selectors(選擇器)的使用(九、表單對(duì)象屬性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門(mén),后進(jìn)階!2009-12-12