使用jqery和PHP实现选择框的联动效果

xiaoxiao2021-02-28  108

效果图

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]);

代码文件

联动文件下载

转载请注明原文地址: https://www.6miu.com/read-19739.html

最新回复(0)