jquery简单的三级联动

1、引入js（注意此方法依赖于jquery）

<script src="jquery.city.select.js"></script>  //自动的三级联动
<script src="area_data.js"></script> // 三级联动所需要的数据

2、进行对select操作（ 注意id必须填写 并且和下方js相对应）

<div class="sel_city">
    <ul>
        <li class="pc_sel_city">
            <select id="s_province" name="s_province" class="changeaddress"></select>&nbsp;&nbsp;
            <select id="s_city" name="s_city" class="changeaddress"></select>&nbsp;&nbsp;
            <select id="s_county" name="s_county" class="changeaddress"></select>
        </li>
    </ul>
</div>

3、插件调用代码

<script type="text/javascript">
    //插件调用代码
    $(function () {
        $('#s_province, #s_city, #s_county').citylist({
            data: area_data,
            children: ['citys', 'areas'],
            selected: ['', '', '']  // 赋初值 省 市 县
        });
    });
</script>

4、拓展（将引用的城市选择列表进行同步数据库）

		// 将获取到的数据进行写入到 area_data.js 中
		$data = $this->getAreaData(100000);
        $myfile = $_SERVER['DOCUMENT_ROOT'] . '/area_data.js'; // 路径自己对应
        file_put_contents($myfile, 'var area_data=' . json_encode($data));

/*
     * 递归获取三级分类
     * */
    public function getAreaData($pid = 100000)
    {
        $this->user_info();
        $info = Areas::where("parent_id=" . $pid)->select();
        $data = array();
        if (!empty($info)) {
            foreach ($info as $k => $v) {
                $data[$k]['id'] = $v['area_id'];
                $data[$k]['name'] = $v['area_name'];
                $child = $this->getAreaData($v['area_id']);
                if (!empty($child)) {
                    if ($v['area_type'] == 1) {
                        $data[$k]['citys'] = $child;
                    } else {
                        $data[$k]['areas'] = $child;
                    }
                }
            }
        }
        return $data;

    }

5、js文件和数据库的文件都放到百度网盘中了 自己下载下吧！！！

• 链接：https://pan.baidu.com/s/1vEI3H5z0HInrvrX5PBv4pQ
• 提取码：tw02
• 复制这段内容后打开百度网盘手机App，操作更方便哦

这是第一次写博客 仅供参考 不喜勿碰 侵权联系我会主动删除的