2. 程式人生 > 其它 >jQuery/原生實現只顯示年份下拉框

jQuery/原生實現只顯示年份下拉框

阿新 • • 發佈：2020-12-23

技術標籤：javascriptjqueryuijavascripthtml5jquerycss3

只展示年份的下拉框…

程式碼:

<!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/原生實現只顯示年份下拉框

技術標籤：javascriptjqueryuijavascripthtml5jquerycss3 只展示年份的下拉框… 程式碼: <!DOCTYPE html>

原生jQuery實現只顯示年份下拉框

本文例項為大家分享了jQuery實現只顯示年份下拉框的具體程式碼，供大家參考，具體內容如下

微信小程式實現簡單的select下拉框

微信小程式實現一個簡單的select下拉框，供大家參考，具體內容如下 用的是transform過渡，沒用動畫

uniapp如何使用picker寫一個只顯示年份和月份的下拉框

技術標籤：uniapp小程式 效果： <picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="dateChange"

JavaScript實現HTML導航欄下拉選單[懸浮顯示]

此文轉載自：https://blog.csdn.net/Gorho/article/details/110086605 JavaScript實現HTML導航欄下拉選單[懸浮顯示]

原生js、jquery下拉框選中內容的獲取

技術標籤：前端 <select id="sel"> <option value="add">增加</option>

原生js實現下拉框選擇元件

本文例項為大家分享了js實現下拉框選擇元件的具體程式碼，供大家參考，具體內容如下

原生JS實現輸入下拉框提示

技術標籤：JSWEBjavascript前端 目錄： 文章目錄 前言功能 前言 大部分文章都是用了JQ或者其他的工具，而少部分利用原生JS實現功能的文章又敘述不清楚，所以針對這個問題進行整理。

jquery實現戶籍地選擇下拉框

利用jquery實現戶籍地選擇下拉框的具體程式碼，供大家參考，具體內容如下 data.js

原生js實現select下拉框選擇

原生js實現select下拉框選擇 最近在做一個專案需要相容到ie不同版本，在使用select時遇到了各種問題。後來索性就自己使用原生js實現了這樣一個下拉框，話不多說，直接上程式碼吧

js實現select下拉框選擇

最近在做一個專案需要相容到ie不同版本，在使用select時遇到了各種問題。後來索性就自己使用原生js實現了這樣一個下拉框，話不多說，直接上程式碼吧。

js實現帶搜尋功能的下拉框

本文例項為大家分享了Android九宮格圖片展示的具體程式碼，供大家參考，具體內容如下

jQuery操作選中select下拉框的值程式碼例項

這篇文章主要介紹了jQuery操作選中select下拉框的值程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Python之Django自動實現html程式碼(下拉框,資料選擇)

我就廢話不多說了，還是直接看程式碼吧！ #模板 class IndexForm(forms.Form): # 模板,使用者提交的name和這裡的變數名一定要是一致的.否則不能獲取資料

JS實現省市縣三級下拉聯動

純JS實現省市縣三級下拉聯動，供大家參考，具體內容如下 程式碼如下： <!DOCTYPE html>

在Angular中實現一個級聯效果的下拉框的示例程式碼

實現一個具有級聯效果的下拉搜尋框，實現的結果如下圖所示 我們主要通過這個元件，來學習一些細微的邏輯，比如: 如何計算input框內文字的長度； 如何獲取游標的位置；如何實現滾動條隨著上下鍵盤的按動進行移動....

vue+Element中table表格實現可編輯（select下拉框）

最近在工作中遇到一個問題，需要在表格中實現資料可編輯狀態，具體情況是需要在單元格里加入下拉框；並且每個下拉框的陣列資料是不一樣的，具體是根據當前行前面資料的id查詢而來，前面的是資料是動態生成的，後面的

C# MVC LayUI實現下拉框二級聯動

一、layui.use 1、LayUI的官方使用檔案：https://www.layui.com/doc/ 2、layui的內建模組不是預設就載入好的，必須要執行啟動模組的這種方法後模組才會載入；

C# MVC 使用LayUI實現下拉框二級聯動的功能

一、layui.use 1、LayUI的官方使用文件：https://www.layui.com/doc/ 2、layui的內建模組不是預設就載入好的，必須要執行啟動模組的這種方法後模組才會載入；

Element-ui 自定義下拉框，實現選擇圖片並且回顯圖片

template： <!-- mark用來確定方向的指向 --> <el-select v-model=\"scope.row.mark\" style=\"width: 100%;\" placeholder=\"請選擇\" @change=\"changeSelection(scope)\":ref=\"\'select\'+scope.$inde