Javascript语言用3个列表框(select)实现的年、月、日三级联动

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量656 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 语言 function date action 日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tlnyhl/article/details/3890484
版权

以下是代码：

<HTML>
<HEAD>
<TITLE>日历</TITLE>
</HEAD>
<BODY οnlοad="load()">
<SCRIPT LANGUAGE="JavaScript">
function TGetDaysInMonth(iMonth, iYear) {
  var dPrevDate = new Date(iYear, iMonth, 0);
  return dPrevDate.getDate();
}

function TUpdateCal(iYear, iMonth) {
  var dDate=new Date();
  daysInMonth = TGetDaysInMonth(iMonth, iYear);
  while(document.all.tbSelDay.childNodes.length>0)
  {
    document.all.tbSelDay.removeChild(document.all.tbSelDay.childNodes[0]);
  }

  for (d = 1; d <= parseInt(daysInMonth); d++) {
 option=document.createElement("option");
 option.value=d;
 option.appendChild(document.createTextNode(d));
 document.all.tbSelDay.appendChild(option);
 if(d==dDate.getDate())
 {
  option.selected=true;
 }
  }
}

function load()
{
  <!--出始化年-->
  var dDate = new Date();
  var dCurYear = dDate.getFullYear();
  for(var i=dCurYear-10;i<dCurYear+5;i++)
  {
    option=document.createElement("option");
    option.value=i;
    option.appendChild(document.createTextNode(i));
    document.all.tbSelYear.appendChild(option);
    if(i==dCurYear)
    {
 option.selected=true;
    }
  }
  <!--出始化月-->
  for(var i=1;i<=12;i++)
  {
    option=document.createElement("option");
    option.value=i;
    option.appendChild(document.createTextNode(i));
    document.all.tbSelMonth.appendChild(option);
    if(i==(dDate.getMonth()+1))
    {
        option.selected=true;
    }
  }
}
</script>

<form name="frmCalendarSample" method="post" action="">
年：
<select name="tbSelYear" οnchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
</select>
月：
<select name="tbSelMonth" style="width: 50px" οnchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
</select>
日：
<select name="tbSelDay"></select>
<script language="JavaScript">
TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value);
</script>
</form>
</BODY>
</HTML>

 

你也可以直接下载：

http://cn.ziddu.com/download/264275/date.txt.html

 

tlnyhl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现年、月、日三下拉框联动
Richard_Jason的专栏
10-24 581
效果图： 示例代码：     年月日三下拉框联动                年       月       日            window.onload = function(){   strYYYY = document.form1.YYYY.outerHTML;   strMM = docume
一个年月日三下拉框联动实现JS代码
05-20
一个年月日三下拉框联动实现JS代码 <form name=form1> <select name=YYYY onchange="YYYYMM(this.value)"> <option value="">请选择 年</option> </select> <select name=MM onchange="MMDD(this.value)"> <option value="">选择 月</option> </select> <select name=DD> <option value="">选择 日</option> </select> </form>
年月日三下拉框联动
系统运维
09-05 113
年月日三下拉框联动(IE) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
JS选择器querySelector和~All，三个原生选择器
热门推荐
Lawliet
09-28 2万+
比较高级的万能选择器，比较常用 定义： querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 语法 document.querySelector(CSS selectors)
javaScript 实现一个 下拉列表选择 的函数
lester的专栏
08-29 512
转载自：http://zhidao.baidu.com/question/51292243 实现代码如下： var x=1; function changeSelect() { x=document.getElementById("x_value").val
Select框下拉城市三级联动代码
06-24
在网页开发中，"Select框下拉城市三级联动代码"是一种常见的交互设计，它用于创建一个下拉选择框，展示省、市、区三级结构的城市列表，并且支持通过中文拼音首字母快速搜索城市。这样的功能在许多需要用户输入地理...
HTML二级联动下拉列表框的实现,如选择 省,市.zip
01-13
HTML二级联动下拉列表框是一种常见的网页交互设计，它允许用户在两个或多个下拉菜单之间建立关联，以便根据用户在第一个下拉框中的选择动态更新第二个下拉框的内容。这种设计常见于区域选择，例如选择省份后，城市...
三级下拉列表 select 网页 html5
03-29
这时，我们需要使用多个`<select>`标签，并通过JavaScript实现它们之间的联动。 1. **HTML结构**： 创建三个独立的`<select>`标签，每个代表一个级别。添加`id`属性以便于JS操作，并且在每个选项中添加特定的值，...
Select框下拉城市三级联动特效代码
03-20
在网页开发中，"Select框下拉城市三级联动特效代码" 是一种常见的交互设计，用于实现用户在选择城市时的便捷操作。这种效果通常应用于地址输入或者定位服务中，能够帮助用户快速找到并选择他们所在的城市，特别是...
移动端、h5省市区三级联动
03-27
如果这个项目使用了WeUI，那么省市区三级联动的实现可能基于WeUI的组件，如`picker`或自定义的组件。 4. **数据源管理**：在实现三级联动时，需要有一个包含所有省市区的数据源。这个数据源通常是一个JSON对象，...
省市选择三级联动，Html+Jquery+XML+Ajax实现,web开发各种语言都通用
11-15
省市选择三级联动，Html+Jquery+XML+Ajax实现，无论php，jsp, html, asp ，aspx等各种语言都通用。 http://blog.csdn.net/ful1021/article/details/16310667 详细查看地址
利用select实现年月日三级联动的日期选择效果【推荐】
08-31
关于select控件，可能年月日三级联动的日期选择效果是最常见的应用了。本文将对日期选择效果进行详细介绍。需要的朋友一起来看下吧
web页面中各种下拉框日期控件，js
12-07
很好用的一款js做的日期控件，看用户需求自由设定格式，可以有时分秒，也可以没有时分秒，很好用
JS实现年月日下拉框的联动
summerpoppy的博客
12-30 2322
第一次写博客，刚学JS部分2天，新手写个年月日的下拉框。欢迎指正！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
利用select实现年月日三级联动的日期选择效果
weixin_34221773的博客
09-16 253
前面的话 　　关于select控件，可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践，下面将对日期选择效果进行详细介绍   演示 规划 　　默认情况下，年、月、日分别由3个select控件组成，id分别为sel1，sel2，sel3。它们且所包含的option[0]的值，分别为'年'、'月'、'日' 　　年份范围为1900-2100，月份范围为1-12，天的...
this关键字
weixin_30836759的博客
07-09 45
在javascript中，必须为属性显式的指定this关键字 。 写成 return this.width*this.height 如果觉得必须在每个实例字段前都使用this前缀很不好看，那么可以在自己的每个方法中使用with语句 Rectangle.prototype.area = function() { with(this){ return wid...
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 279
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
js下拉列表框三级联动
03-13
在JavaScript中实现下拉列表框的三级联动，可以通过以下步骤来完成： 1. HTML结构：首先，在HTML中创建三个下拉列表框，分别表示三个级别的选项。例如： ```html <select id="province"> <option value="">请选择省份</option> <!--省份选项--> </select> <select id="city"> <option value="">请选择城市</option> <!--城市选项--> </select> <select id="district"> <option value="">请选择区县</option> <!--区县选项--> </select> ``` 2. 数据准备：准备好省份、城市和区县的数据，可以使用数组或者JSON对象来存储。例如： ```javascript var provinceData = [ { name: "北京", cities: ["北京市"] }, { name: "上海", cities: ["上海市"] }, //其他省份及其城市数据 ]; var cityData = [ { name: "北京市", districts: ["东城区", "西城区", "朝阳区", "海淀区"] }, { name: "上海市", districts: ["黄浦区", "徐汇区", "静安区", "杨浦区"] }, //其他城市及其区县数据 ]; var districtData = [ { name: "东城区" }, { name: "西城区" }, { name: "朝阳区" }, { name: "海淀区" }, //其他区县数据 ]; ``` 3. 动态加载选项：使用JavaScript动态加载选项，根据用户选择的省份和城市来更新城市和区县的选项。例如： ```javascript var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); var districtSelect = document.getElementById("district"); // 省份选项改变时触发事件 provinceSelect.addEventListener("change", function() { var selectedProvince = provinceSelect.value; updateCityOptions(selectedProvince); }); // 城市选项改变时触发事件 citySelect.addEventListener("change", function() { var selectedCity = citySelect.value; updateDistrictOptions(selectedCity); }); // 更新城市选项 function updateCityOptions(selectedProvince) { // 清空城市选项 citySelect.innerHTML = "<option value=''>请选择城市</option>"; // 查找对应省份的城市数据 var cities = cityData.find(function(item) { return item.name === selectedProvince; }).cities; // 动态添加城市选项 cities.forEach(function(city) { var option = document.createElement("option"); option.value = city; option.textContent = city; citySelect.appendChild(option); }); // 更新区县选项 updateDistrictOptions(""); } // 更新区县选项 function updateDistrictOptions(selectedCity) { // 清空区县选项 districtSelect.innerHTML = "<option value=''>请选择区县</option>"; // 查找对应城市的区县数据 var districts = districtData.find(function(item) { return item.name === selectedCity; }).districts; // 动态添加区县选项 districts.forEach(function(district) { var option = document.createElement("option"); option.value = district; option.textContent = district; districtSelect.appendChild(option); }); } // 初始化省份选项 provinceData.forEach(function(province) { var option = document.createElement("option"); option.value = province.name; option.textContent = province.name; provinceSelect.appendChild(option); }); ``` 这样，当用户选择省份时，城市选项会根据选择的省份进行更新；当用户选择城市时，区县选项会根据选择的城市进行更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值