三级联动

最新推荐文章于 2016-09-22 21:56:00 发布

xinxinji

最新推荐文章于 2016-09-22 21:56:00 发布

阅读量535

点赞数

分类专栏： php jquery 文章标签：三级联动联动效果联动地区列表

本文链接：https://blog.csdn.net/xinxinji/article/details/50521723

版权

php 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

写一个简单的三级联动的效果，比较简单。

直接上代码：

<请提前下载jquery库 >

index.php

// 分类
include "UnlimitedClassIfication.php";
$object = new UnlimitedClassIfication();
$a = $object->getArea();
?>

<html>
    <meta charset="UTF-8"/>
    <title>三级联动</title>
    <body>
        <select class="cate">
            <option value="0">请选择</option>
            <?php foreach ($a as $k => $v) :?>
            <option value="<?php echo $k; ?>"><?php echo $v; ?></option>
            <?php endforeach; ?>
        </select>
        <select class="cate">
            <option value="0">请选择</option>
        </select>
        <select>
            <option value="0">请选择</option>
        </select>
    </body>
    <script src="jq.js"></script>
    <script type="text/javascript">
        $(".cate").change(function(){
            var obj  = $(this);
            var type = obj.val();
            obj.nextAll().html('<option value="0">请选择</option>');
            $.ajax({
                    url:"http://www.test.com/UnlimitedClassIfication.php",
                    type:"get",
                    data:{"flag":1, "type":type},
                    async:false,
                    success:function(a) {
                        var a = eval("("+ a + ")");
                        // alert(a.status);
                        if(a.status == 0) {
                            alert(a.mess);
                        } else if (a.status == 1) {
                            obj.next().html(a.data);
                        }
                    }
            });
        });
    </script>
</html>

UnlimitedClassIfication.php

/**
 * 三级联动
 */
class UnlimitedClassIfication
{
    /**
     * 地区信息.
     *
     * @return array.
     */
    function area ()
    {
        return  array(
            1 => array(
                2 => "北京",
                3 => "山西"
            ),
            2 => array(
                4 =>"北京",
            ),
            3 => array(
                5 => "太原",
                6 => "晋中"
            ),
            4 => array(
                7 => "朝阳",
                8 => "海淀"
            ),
            5 => array(
                9 => "清徐",
                10 => "小店",
            ),
            6 => array(
                11 => "介休",
                12 => "太谷"
            )
        );
    }

    /**
     * 获取一级分类.
     *
     * @return return
     */
    function getArea ()
    {
        $area = $this->area();

        return $area[1];
    }

    /**
     * 三级联动.
     *
     * @param int $type 分类标识.
     *
     * @return string
     */
    function getUnlimitedClassIfication ($type)
    {
        header("Content-type: text/html; charset=utf-8");

        $area = $this->area();
        if (isset($area[$type])) {
            $content = "<option value=0>请选择</option>";
            foreach ($area[$type] as $k => $v) {
                $content .= "<option value='{$k}'>{$v}</option>";
            }
            $return = array("status" => 1, "mess" => "", "data" => $content);;
        } else {
            $return = array("status" => 0, "mess" => "该分类不存在子分类", "data" => array());
        }

        echo json_encode($return);
    }

}

if (isset($_GET['flag'])) {
    $type = $_GET['type'];
    $object = new UnlimitedClassIfication();
    $object->getUnlimitedClassIfication($type);
}

访问index.php 想要的效果这就出来了！！！