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

来源：互联网发布：java 转二进制编辑：程序博客网时间：2024/06/07 07:29

效果图

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

代码文件

联动文件下载

0 0