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

最新推荐文章于 2022-11-27 14:15:18 发布

善良死神

最新推荐文章于 2022-11-27 14:15:18 发布

阅读量3.8k

点赞数

分类专栏： JavaScript 文章标签： html php

本文链接：https://blog.csdn.net/li741350149/article/details/71194339

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jqery和PHP实现选择框的联动效果

页面加载完第一次请求后台PHP代码得到第一个选项的子分类，而后每当分类改变时，再次请求后台得到具体的子分类。前台请求后台的PHP，得到数据进行返回，而PHP的数据大多数是从数据库中得到的，在这里只是一些伪数据
复制链接

扫一扫