多级联动下拉框,前端显示

          基于宿舍管理系统下,进行入住登记功能,点击新增动态查询数据库中所有楼栋,并点击相应楼栋后,动态生成楼内所有楼层,接着动态生成该层内所有宿舍

1> 点击入住登记页面,向后端发送请求,动态获取楼栋信息

mounted() {
			// 页面打开后向后端发送请求，动态获取楼栋信息
			this.$http.get("back/dorm?mark=buildList").then((resp) => {
				if (resp.data.code == 200) {
					this.buildList = resp.data.data; //集合形式接收
				}
			})
		}

2>后端接收请求,创建相应方法动态查询数据库中所有楼栋信息

    //动态查询楼栋信息
    public List<Build> builds() throws SQLException, ClassNotFoundException {
        Connection connection = null;
        PreparedStatement ps = null;
        List<Build> builds = new ArrayList<>();
        try {
            connection = JdbcUtil.getConnection();
            // 查询了楼栋的三个信息,id(保存关联使用的),name(前端显示用的),floor_num(动态生成楼层数用的)
            ps = connection.prepareStatement("select id,name,floor_num from build");
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                Build build = new Build();
                build.setId(rs.getInt("id"));
                build.setName(rs.getString("name"));
                build.setFloorNum(rs.getInt("floor_num"));
                builds.add(build);
            }
        } finally {
            JdbcUtil.close(connection,ps);
        }
        return builds;
    }

3>动态显示所有楼栋,定义 @change="createFloor()" 当改变所选楼栋后,获取该楼栋的所有层数

<el-form-item label="楼栋">
	<el-select v-model="form.buildid" placeholder="请选择" @change="createFloor()">
	    <el-option v-for="build in buildList" :key="build.id" :label="build.name" :value="build.id">
	    </el-option>
    </el-select>
</el-form-item>

createFloor() {
		// 如何获取楼栋中的楼层数	obj就是我们在下拉框中选中的那个对象
		var obj = this.buildList.find((build) => { //这里testOptions就是上面的测试源
					// this.form.buildid 这是我们下拉框选中的id
		return build.id === this.form.buildid; //赛选出匹配数据
		});
		// console.log(obj.floorNum);
		this.floor_num = obj.floorNum;
}

 

4>遍历显示该栋楼所有楼层

<el-form-item label="楼层">
	<el-select v-model="form.floorNum" placeholder="请选择" @change="createDormList()">
			<el-option v-for="n in floor_num" :key="n" :label="n" :value="n">
			</el-option>
	</el-select>
</el-form-item>

 

定义 @change="createDormList()" 方法,选择完楼层后,根据楼栋id,查询该层内所有宿舍

// 选择完楼层后,根据楼栋id,所在楼层查询所有该层的宿舍
createDormList(){
	            this.$http.get("back/recordmark=findDormList&buildid="+this.form.buildid+"&floorNum="+this.form.floorNum).then((resp) => {
		 if (resp.data.code == 200) {
			 this.dormList = resp.data.data; //接收查询出来的所有宿舍
		 }
	 })
}

5>后端服务器接收请求,调用 查询相应楼栋楼层下的所有宿舍的方法

// 根据楼栋id和楼层数,查询所有的宿舍
public List<Dorm> findDormList(String buildid, String floorNum) throws SQLException, ClassNotFoundException {
        List<Dorm> dorms = new ArrayList<>();
        Connection connection = null;
        PreparedStatement ps = null;
        try {
            connection = JdbcUtil.getConnection();
            String sql = "SELECT id,dorm_num FROM dorm " +
                    " WHERE buildid = ? AND floor_num=? AND state = 0\n";
            ps = connection.prepareStatement(sql);
            ps.setObject(1, buildid);
            ps.setObject(2, floorNum);
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                Dorm dorm = new Dorm();
                dorm.setId(rs.getInt("id")); //宿舍id
                dorm.setDormNum(rs.getString("dorm_num")); //宿舍号
                dorms.add(dorm);
            }
      } finally {
            JdbcUtil.close(connection, ps);
     }
   return dorms;
}

6>下拉框显示该楼栋该层下所有宿舍

<el-form-item label="宿舍">
		<el-select v-model="form.dormid" placeholder="请选择" >
				<el-option v-for="dorm in dormList" :key="dorm.id" :label="dorm.dormNum" :value="dorm.id">
				</el-option>
		</el-select>
</el-form-item>

 

7>最好边写边运行,查看运行结果，可以用alert()和console.log()来检查自己定义的方法是否被调用

附：前端入住登记新增所有代码

<template>
	<el-dialog title="入住登记" :visible.sync="dialogVisible" width="40%">
		<el-form ref="form" label-width="80px">
			<el-form-item label="楼栋">
				<el-select v-model="form.buildid" placeholder="请选择" @change="createFloor()">
					<el-option v-for="build in buildList" :key="build.id" :label="build.name" :value="build.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="楼层">
				<el-select v-model="form.floorNum" placeholder="请选择" @change="createDormList()">
					<el-option v-for="n in floor_num" :key="n" :label="n" :value="n">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="宿舍">
				<el-select v-model="form.dormid" placeholder="请选择" >
					<el-option v-for="dorm in dormList" :key="dorm.id" :label="dorm.dormNum" :value="dorm.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="学号" >
				<el-input v-model="form.num" autocomplete="off" @blur="checkNum()"></el-input>
			</el-form-item>
	
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save()">保存</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false, //默认对话框关闭
				buildList: [],
				dormList:[],
				floor_num: 0, //楼栋总层数
				form: {
					buildid: "",
					floorNum: "", //宿舍所在楼层
					dormid:"",
					studentid:"",
					num: "",
					mark: "save"
				}
			}
		},
		methods: {
			// 选择完楼层后,根据楼栋id,所在楼层查询所有该层的宿舍
			createDormList(){
				this.$http.get("back/record?mark=findDormList&buildid="+this.form.buildid+"&floorNum="+this.form.floorNum).then((resp) => {
					if (resp.data.code == 200) {
						this.dormList = resp.data.data;
					}
				})
			},
			save() {
				if(this.form.studentid.length!=0){ // 根据学生id判断学号是否有效
					this.$http.post("back/record", jsonToString(this.form)).then((resp) => {
						if (resp.data.code == 200) {
							this.dialogVisible = false;
							this.$router.go();
							this.$message({message:resp.data.message,type:"success"});
						}
					})
				}else{
					this.$message({message:"学号不存在,保存不响应",type:'warning'});
				}
			},
			createFloor() {
				// console.log("752572");
				// 如何获取楼栋中的楼层数	obj就是我们在下拉框中选中的那个对象
				var obj = this.buildList.find((build) => { //这里testOptions就是上面的测试源
					// this.form.buildid 这是我们下拉框选中的id
					return build.id === this.form.buildid; //赛选出匹配数据
				});
				// console.log(obj.floorNum);
				this.floor_num = obj.floorNum;
			},
			// 验证输入的学号是否存在
			checkNum(){
				 // console.log(this.form.num);//向后端发送查询,如果学生存在,返回学生id,
				 // this.form.studentid=7;
				this.$http.get("back/record?mark=checkNum&num="+this.form.num).then((resp) => {
					if (resp.data.code == 200) {
						if(resp.data.data>0){  // 学号存在
							this.$message({message:resp.data.message,type:"success"});
							this.form.studentid = resp.data.data; // 把id 赋给 student
						} 
						if(resp.data.data==0){
							this.$message({message:"学号不存在",type:'warning'});
							// this.form.studentid="";
						}
					}
				})
			}
		},
		mounted() {
			// 页面打开后向后端发送请求，动态获取楼栋信息
			this.$http.get("back/dorm?mark=buildList").then((resp) => {
				if (resp.data.code == 200) {
					this.buildList = resp.data.data;
				}
			})
		}
	}
	//将json对象序列化为键=值&键=值
	function jsonToString(jsonobj) {
		console.log(jsonobj)
		var str = "";
		for (var s in jsonobj) {
			str += s + "=" + jsonobj[s] + "&";
		}
		return str.substring(0, str.length - 1);
	}
</script>

<style>
</style>