实现二级select菜单联动 Ajax，TP5

前端，构建两个select下拉框

<div class="col-6 text-right pr-0">
    <select class="form-control" name="list_1" id="list_1">
            <option value="0">请选择作品一级分类</option>
            {foreach $list_1 as $v}							
            <option value="{$v.id}">{$v.name}</option>
            {/foreach}
    </select><br>

    <select class="form-control yao" name="category" id="category" >
            <option value="0">请选择作品二级分类</option>
    </select>
</div>

后端 TP5 Ajax接口

    public function upload_ajax()
    {
        if($_POST){
            
            $id= input('param.id');
            $category = db('category')->where(['type'=>'default'])->where('pid','=',$id)->field('id,name')->select();
            //是ajax接口返回到前端的数据
            return json($category);
        }   
    }

前端JQuery

    $(function{
	$('#list_1').change(function(){
		var id = $(this).find("option:selected").val();
		// console.log(id);
		$.ajax({
			// 传输
			type:"POST",
			// url方式
			url:"{:url('Contents/upload_ajax')}",
			//data传输方式 data是ajax传输到后台控制器的数据
			data:{id:id},
			// dataType:json,
			// Ajax无论返回什么数据，都是以data为载体返回过来
			success:function(data){
				// console.log(data.id); data.id这种写法是错的，而且大错特错了。
				// console.log(id);
				var count=data.length;
                                //连接
				if(id==0){
					$(".yao").empty();
					var c = '';
					c+='<option value="0">请选择作品二级分类</option>';
					$(".yao").append(c);
				}else{
					$(".yao").empty();
						var b='';
						for(j=0;j<count;j++){
							b+='<option value="'+data[j].id+'">'+ data[j].name +'</option>';
						}
					$(".yao").append(b);
				}
			}
		});
	});
    });