根据性别选择不同的年龄（男和女对应不同的年龄阶段的选择）

最新推荐文章于 2024-03-28 21:46:24 发布

M_SSY

最新推荐文章于 2024-03-28 21:46:24 发布

阅读量1.1k

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/M_SSY/article/details/80439725

版权

jQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<span><input type="radio" name="sex" value="1" checked="checked" >男</span>
		<span><input type="radio" name="sex" value="2">女</span>
		<select name="num" id="age">
			<option value="30">30</option>
		</select>
	</body>

</html>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		if($('[name="sex"]').val() == 1) {
			initAge(30, 50);
		} else if($('[name="sex"]').val() == 2) {
			initAge(40, 50);
		}
		$('[name="sex"]').change(function(e) {
			if(e.target.value == 2) {
				initAge(40, 50);
			} else if(e.target.value == 1) {
				initAge(30, 50);
			}
		})
		$('[name="sex"]').change(function() {
			var index = $('input[name="sex"]:checked').val();
			console.log(index);
			if(index == 1) {
				$('#age option:selected').html('2');
				initAge(30, 50);
			} else if(index == 2) {
				$('#age option:selected').html('4');
				initAge(40, 50);
			}
		})

		function initAge(star, end) {
			$("#age").empty();
			console.log(star, end);
			for(var i = star; i <= end; i++) {
				$('#age').append("<option value=" + i + ">" + i + "</option>");
			}
		}
	})
</script>

分别点击男生和女生，下拉框的值变化