ajax-select+option实现二级联动

最新推荐文章于 2021-10-22 14:53:43 发布

南有樛木。

最新推荐文章于 2021-10-22 14:53:43 发布

阅读量805

点赞数

分类专栏： js ajax

本文链接：https://blog.csdn.net/qq_35310623/article/details/89842297

版权

js 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

实现效果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>二级联动</title>
	<script type="text/javascript" src="jq/jquery-1.12.4.min.js"></script>
	<style type="text/css">
		label{
			display: block;
		}
		select{
			width:200px;
			height:40px;
		}
	</style>
</head>
<body>
	<form action="url" method="post">
		<label>院系</label>
		<select name="areaid"></select>

		<label>班级</label>
		<select name="classid"></select>
	</form>
</body>
<script type="text/javascript">
	$.get("url",function(data){
		for(var i in data.msg){
			$("select[name='areaid']").append("<option value='"+data.msg[i].id+"'>"+data.msg[i].name+"</option>");
		}
		// console.log(id);
		$("select[name='areaid']").change(function(){
			var id=$("select[name='areaid']>option:selected").val();
			$.get("url",{id:id},function(data){
				$("select[name='classid']>option").remove();
				for(var i in data.msg){
					$("select[name='classid']").append("<option value='"+data.msg[i].id+"'>"+data.msg[i].name+"</option>");
				}
			})
		})
	},"json")
</script>
</html>