tp5下两种不同形式的二级联动

效果一

实现代码

1，html

<div class="row cl">
      <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属城市：</label>
      <div class="formControls col-xs-8 col-sm-2">
	    <span class="select-box">
	    <select name="city_id" class="select cityId">
		<option value="0">--请选择--</option>
		{volist name="citys" id="vo"}
		<option value="{$vo.id}">{$vo.name}</option>
		{/volist}
	    </select>
	    </span>
	</div>
	<div class="formControls col-xs-8 col-sm-2">
	    <span class="select-box">
	    <select name="se_city_id" class="select se_city_id">
		<option value="0">--请选择--</option>
	    </select>
	    </span>
	</div>
</div>

2,html下的js

<script>
	var SCOPE = {
	    'city_url' : '{:url('api/City/getCitysByParentId')}',
	    'category_url' : '{:url('api/Category/getCategoryByParentId')}',
	}

    /**
     * 城市相关二级内容
     */
    $(".cityId").change(function () {
        city_id = $(this).val();
        //抛送请求
        url = SCOPE.city_url;
        postData = {'id': city_id};
        $.post(url, postData, function (result) {
            //相关的业务处理
            if (result.status == 1) {
                //将信息填充到html中
                data = result.data;
                city_html = "";
                $(data).each(function (i) {
                    city_html += "<option value='" + this.id + "'>" + this.name + "</option>";
                });
                $('.se_city_id').html(city_html);
            } else if (result.status == 1) {
                $('.se_city_id').html('');
            }
        }, 'json')
    });
</script>

效果二

1,html

<div class="row cl">
    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属分类：</label>
    <div class="formControls col-xs-8 col-sm-3"> <span class="select-box">
    	<select name="category_id" class="select categoryId">
    	    <option value="0">--请选择--</option>
    	    {volist name="categorys" id="vo"}
    	    <option value="{$vo.id}">{$vo.name}</option>
    	    {/volist}
    	</select>
        </span>
    </div>
</div>
<div class="row cl">
    <label class="form-label col-xs-4 col-sm-2">所属子类：</label>
    <div class="formControls col-xs-8 col-sm-3 skin-minimal">
        <div class="check-box se_category_id">

        </div>
    </div>
</div>

2,html下的js

<script>
	var SCOPE = {
	    'city_url' : '{:url('api/City/getCitysByParentId')}',
		'category_url' : '{:url('api/Category/getCategorysByParentId')}',
	}
	
    /**
     * 分类相关二级内容
     */
    $(".categoryId").change(function () {
        category_id = $(this).val();
        //抛送请求
        url = SCOPE.category_url;
        postData = {'id': category_id};
        $.post(url, postData, function (result) {
            //相关的业务处理
            if (result.status == 1) {
                //将信息填充到html中
                data = result.data;
                category_html = "";
                $(data).each(function (i) {
                    category_html += '<input name="se_category_id" type="checkbox" id="checkbox-moban" value="' + this.id + '"/>' + this.name;
                    category_html += '<label for="checkbox-moban"> </label>'
                });
                $('.se_category_id').html(category_html);
            } else if (result.status == 0) {
                $('.se_category_id').html('');
            }
        }, 'json')
    });
</script>

第一种效果的控制器

<?php
namespace app\api\controller;

use think\Controller;

class Category  extends Controller
{
    private $obj;

    public function _initialize()
    {
        $this->obj = model("Category");
    }

    public function getCategoryByParentId()
    {
        $id = input('post.id',0,'intval');
        if (!$id) {
            $this->error('ID不合法');
        }
        //通过id获取二级城市
        $categorys = $this->obj->getNormalCategorysByParentId($id);
        if (!$categorys) {
            return show(0, 'error');
        }
        return show(1, 'success', $categorys);
    }
}

第一种效果中的模型

    //首页展示的一级栏目
    public function getNormalFirstCategorys($parentId = 0)
    {
        $data = [
            'parent_id' => $parentId,
            'status' => ['neq', -1],
        ];
        $order = [
            'listorder' => 'desc',
            'id' => 'desc',
        ];
        $result = $this->where($data)
            ->order($order)
            ->paginate();
        return $result;
    }

控制器中产返回信息中的show函数为自定义的

<?php
function show($status, $message = '', $data = [])
{
    return [
        'status' => intval($status),
        'message' => $message,
        'data' => $data,
    ];
}

或者返回信息的时候使用tp5的方法 $this->result();例如

 //排序逻辑
    public function listorder($id, $listorder)
    {
        $res = $this->obj->save(['listorder' => $listorder], ['id' => $id]);
        if ($res) {
            $this->result($_SERVER['HTTP_REFERER'], 1, 'success');
        } else {
            $this->result($_SERVER['HTTP_REFERER'], 0, '更新失败');
        }
    }