效果图
html
html只用两个简单的select选择框。
js
js代码就是在页面加载完第一次请求后台PHP代码得到第一个选项的子分类，而后每当分类改变时，再次请求后台得到具体的子分类。
PHP
前台请求后台的PHP，得到数据进行返回，而PHP的数据大多数是从数据库中得到的，在这里只是一些伪数据
源代码
html
<!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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
width: 100%;
text-align: center;
margin-top: 50px;
}
.cate{
width: 150px;
height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="content">
<select class="cate" name="cate" id="cate">
<option value="0">水果</option>
<option value="1">电子商品</option>
<option value="2">服装</option>
</select>
<select class="cate" name="attr" id="attr">
</select>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
$(document).ready(function(){
getDataForAjax();
});
$("#cate").change(function () {
getDataForAjax();
});
function getDataForAjax() {
cate_id = $('#cate').val();
$.ajax({
type:"post",
url:"data.php",
dataType:'json',
data:{
cate_id:cate_id
},
success:function (data) {
console.log(data);
$('#attr').empty();
for(var i = 0;i < data.length;i++){
$('#attr').append("<option value=" + data[i]['id'] + ">"
+ data[i]['name'] + "</option>");
}
}
});
}
</script>
</html>
PHP
<?php
$category = $_POST['cate_id'];
//得到分类ID，查询数据库，得到分类下有哪些子分类，在这里只是伪数据。
$data = [
[
['id' => 1,'name' => '苹果'],
['id' => 2,'name' => '香蕉'],
['id' => 3,'name' => '橘子'],
['id' => 4,'name' => '梨'],
],
[
['id' => 1,'name' => '手机'],
['id' => 2,'name' => '电脑'],
['id' => 3,'name' => '平板'],
['id' => 4,'name' => '手表'],
],
[
['id' => 1,'name' => '上衣'],
['id' => 2,'name' => '裤子'],
['id' => 3,'name' => '鞋子'],
],
];
//进行json转换，返回数据。
echo json_encode($data[$category]);
代码文件
联动文件下载
