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

最新推荐文章于 2024-04-11 17:45:57 发布

coder-春子

最新推荐文章于 2024-04-11 17:45:57 发布

阅读量770

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jqueryui javascript html5 jquery css3

本文链接：https://blog.youkuaiyun.com/weixin_42952297/article/details/111567326

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery或原生JavaScript创建仅显示年份的下拉选择框。通过结合HTML5、CSS3和jQuery，实现一个简洁且易于使用的年份选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只展示年份的下拉框…

代码:

<!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>

只显示年份的下拉框效果