PHP+JQ+html三级联动

最新推荐文章于 2022-11-22 20:23:02 发布

withoutfear

最新推荐文章于 2022-11-22 20:23:02 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/withoutfear/article/details/110957009

版权

jq+html页面代码:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>三级联动</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<?php if (isset($itemid)) { ?>
<div id="ssq" name="areas" data_sheng="<?php echo $item['sheng']; ?>" data_shi="<?php echo $item['shi']; ?>" data_qu="<?php echo $item['qu']; ?>"></div>
<?php } else { ?>
<div id="ssq" name="areas"></div>
<?php } ?>
</body>

<script>
        // 加载三个下拉列表
        $("#ssq").each(function () {
            $(this).prepend("<td><select style='display: block;' name='post[sheng]' class='sheng'></select></td><td><select style='display: block;' name='post[shi]' class='shi'></select></td><td><select style='display: block;' name='post[qu]' class='qu'></select></td>");
        });

        function FillSelect(obj, index) {
            var pid = index;
            // 根据父级代号查数据
            $.ajax({
                // 取消异步，也就是必须完成上面才能走下面
                async: false,
                url: "areasLoad.php",
                data: {pid: pid},
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    var str = "";
                    // 遍历数组，把它放入sj
                    for (var sj in data) {
                        str = str + "<option style='width: 100%; display: block;' value='" + data[sj].id + "'>" + data[sj].name + "</option>";
                    }
                    obj.html(str);
                }
            });
        }

        $('#ssq').each(function () {
            if ($(this).attr('data_sheng') == 0) {
                FillSelect($(this).find('.sheng'), $(this).attr('data_sheng'));
                FillSelect($(this).find('.shi'), 1);
                FillSelect($(this).find('.qu'), 2);
            } else {
                FillSelect($(this).find('.sheng'), 0);
                $(this).find('.sheng').val($(this).attr('data_sheng'));
                FillSelect($(this).find('.shi'), $(this).attr('data_sheng'));
                $(this).find('.shi').val($(this).attr('data_shi'));
                FillSelect($(this).find('.qu'), $(this).attr('data_shi'));
                $(this).find('.qu').val($(this).attr('data_qu'));
            }
        });

        // 当省份选中变化，重新加载市
        $(document).on('change', '.sheng, .shi', function () { // 当元素的值发生改变时，会发生 change 事件,该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

            var that = $(this);
            var pid = that.val();
            FillSelect(that.parent().next().find('select'), pid);

            if (that.parent().next().find('select').attr('class') === 'shi') {
                var m_that = that.parent().next().find('select');
                var m_pid = m_that.val();
                FillSelect(m_that.parent().next().find('select'), m_pid);
            }
        });
    </script>

</html>

php代码:

public function load()
    {
        $pid = $_POST["pid"];

        $sql_area = mysqli_connect('host', 'user', 'password', 'database');
        // 检测连接
        if (!$sql_area) {
            //连接失败
            exit('<h1>数据库连接失败</h1>');
        }

        //基于刚创建的连接对象进行一次查询操作
        $area_data = mysqli_query($sql_area, "SELECT `id`,`pid`,`name`,`level` FROM `sso_area` WHERE pid='{$pid}'");
        if (!$area_data) {
            exit('<h1>查询失败</h1>');
        }
        $area_data_arr = [];
        //遍历结果集
        while ($row = mysqli_fetch_assoc($area_data)) {
            //打印结果集
            array_push($area_data_arr, $row);
        }

        //释放结果集
        mysqli_free_result($area_data);

        //断开与数据库连接
        mysqli_close($sql_area);

        echo json_encode($area_data_arr);
        die;
    }

数据库:

CREATE TABLE `sso_area` (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `pid` int(10) DEFAULT NULL COMMENT '父id',
  `name` varchar(100) DEFAULT NULL COMMENT '名称',
  `level` tinyint(4) DEFAULT NULL COMMENT '层级 0 1 2 省市区县',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `pid` (`pid`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='地区表';

withoutfear

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
PHP+JQ+html三级联动

jq+html页面代码:<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>三级联动</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>&l
复制链接

扫一扫