使用jqery和PHP实现选择框的联动效果
html只用两个简单的select选择框。
js代码就是在页面加载完第一次请求后台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]);
代码文件
联动文件下载
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
