jquery实现选择框异步刷新功能

最新推荐文章于 2022-03-14 17:15:11 发布

会加速的蜗牛

最新推荐文章于 2022-03-14 17:15:11 发布

阅读量407

点赞数

分类专栏：前端 jquey javaScript 文章标签： jquery select 异步刷新选择框

本文链接：https://blog.csdn.net/qq_23244029/article/details/93906108

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

javaScript

8 篇文章 0 订阅

订阅专栏

jquey

4 篇文章 0 订阅

订阅专栏

emmmm，稍微写点假数据先模拟下，实现的效果大致如下，丑了点，不要介意哈

当然了，真实的项目环境中不会是这么简单的，到时候返回一堆的数据，然后进行遍历，

这里先上代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>用户中心</title>
	<style>
		#cont {
			display: flex;
			flex-direction: column;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

</head>
<body>
	<div id="select">
		<select>
			<option value="a">a</option>
			<option value="b">b</option>
			<option value="c">c</option>
		</select>
	</div>

	<div id="cont">
		
	</div>
	

	<script>
		
		// 选择框发生改变时
		$('#select select').change(() => {
			// 这里模拟后台返回数据,即将select值传回后台再返回数据后，在页面进行动态加载
			if ($('#select select').val() == 'a'){
				for(let i = 0; i < 1; i++) {
					$('#cont').empty();
					var dom = '';
					dom += '<span>a</span><span>aa</span><span>aaa</span>';
					$('#cont').append(dom);
				}
			}else if ($('#select select').val() == 'b') {
				for(let i = 0; i < 1; i++) {
					$('#cont').empty();
					var dom = '';
					dom += '<span>b</span><span>bb</span><span>bbb</span>';
					$('#cont').append(dom);
				}
			}else {
				for(let i = 0; i < 1; i++) {
					$('#cont').empty();
					var dom = '';
					dom += '<span>c</span><span>cc</span><span>ccc</span>';
					$('#cont').append(dom);
				}
			}

		});


	</script>
</body>
</html>

老样子，大致思路上是：

监听选择框值的改变，怎么监听我上一篇博客有写过的可以参考这个https://blog.csdn.net/qq_23244029/article/details/93904076
向后台传参（参数为选择框的值），然后返回数据，这里就不过多描写
向页面上div内容中append添加返回后的数据
emmm,大致上是这样差不多了，日后再进行添加吧