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
- 向后台传参（参数为选择框的值），然后返回数据，这里就不过多描写，ajax请求可以参考这个，
- 向页面上div内容中append添加
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
