jeefast实现二级联动下拉框查询

目标实现

HTML

<div class="form-group col-sm-2">
				年级：<select @change="getClassesTwo" id="selectGid">
				<option value="0">--请选择年级--</option>
				<option v-for="v in gradetwo" :value="v.gid">{{v.gname}}</option>
			</select> <br>
				班级：<select v-model="q.cid">
				<option value="0">--请选择班级--</option>
				<option v-for="v in classestwo" :value="v.cid">{{v.cname}}</option>
			</select>
			</div>
           

getDayGradeTwo:function () {
			$.ajax({
				type: "POST",
				url: baseURL +  "platform/grade/all9/",
				contentType: "application/json",
				success: function (r) {
					if (r.code === 0) {
						vm.gradetwo = r.grade;
					}else {
					}
				}
			});
		},
		getClassesTwo : function () {
			var gid=$("#selectGid").val();
			$.ajax({
				type: "POST",
				url: baseURL + "platform/classes/all/" +gid,
				contentType: "application/json",
				data: gid,
				success: function (r) {
					if (r.code === 0) {
						vm.classestwo=r.classes;
					} else {
					}
				}
			});
		},
           

@RequestMapping("/all9")
	public R list9(){
		Map<String,Object> map = new HashMap<>();
		List<Grade> list = gradeService.selectByMap(map);
		return R.ok().put("grade", list);
	}
           

效果图