HTML与JS实现三级联动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34609519/article/details/107445210

本文详细介绍了如何使用HTML和JavaScript实现三级联动选择的功能。通过实例代码，讲解了从数据结构设计到事件监听，再到DOM操作的完整过程，帮助读者理解动态更新下拉菜单的实现方法。

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>三级联动</title>
		<!-- CDN的全称是Content Delivery Network，即内容分发网络。 -->
		<!-- CDN加速简单的来说，就是把原服务器上数据复制到其他服务器上，用户访问时，哪台服务器近访问到的就是哪台服务器上的数据。 -->
		<!-- 在页面头部或底部body前引入你想要的cdn节点的js文件既可 -->
		<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

	</head>
	<body>
	<!-- 只需要三个select -->
		<div class='birthday'>
			<select name='year'  id="year" >
				<option value="">请选择</option>
			</select>
			<select name='month'  id="month" >
				<option value="">请选择</option>
			</select>
			<select name='day'  id="day" >
				<option value="">请选择</option>
			</select>
		</div>

	</body>
	<script type="text/javascript">

		//生成年
		for(let i=1990;i<=2018;i++){
			$('<option value=' + i +'></option>').text(i).appendTo('#year')
		}
		
		// 根据年份 生成月
		$('#year').change(function(){
			//先清空原有内容，保留‘请选择’,选择option索引大于0的全部清除
			$('#month option:gt(0)').remove();
			console.log('年份发生改变，当前年份是：'+$('#year').val());
			for(let i=1;i<=12;i++){
				$('<option  value=' + i +'>'+ i +'</option>').appendTo('#month')
			}
		})
		//生成日期，根据年份（闰年）和月份（30，31）确定
		$('#month').change(function(){
			//先清空原有内容
			$('#day option:gt(0)').remove();
			var nowyear = $('#year').val();
			var nowmonth = $('#month').val();
			var flag=0;//0不是闰年
			// 判断闰年
			
			if((nowyear%4==0&&nowyear%100!=0) || nowyear%400==0){
				flag = 1;
			}
			if(nowmonth==2){
				if(flag==1){
					for(let i=1;i<=29;i++){
						$('<option  value=' + i +'>'+ i +'</option>').appendTo('#day')
					}
				}
				else{
					for(let i=1;i<=28;i++){
						$('<option  value=' + i +'>'+ i +'</option>').appendTo('#day')
					}
				}
			}else if(month==4||month==6|month==9||month==11){
				for(let i=1;i<=30;i++){
					$('<option  value=' + i +'>'+ i +'</option>').appendTo('#day')
				}
			}
			else{
				for(let i=1;i<=31;i++){
					$('<option  value=' + i +'>'+ i +'</option>').appendTo('#day')
				}
			}
		})
	</script>
</html>

HTML+JS三级联动