绑定下拉框（0）

还是一样我用的是VS的MVC来完成这次的下拉框数据显示。首先我们需要完成下拉框的样式操作，这样才能够在页面上显示出现数据。我引用的是bootstrap-4.1.3-dist里面的css样式，通过调用他们能够加快的完成样式，而我的下拉框一共有三个，分别给他们一个id，方便我们写js可以调用它，还要引用JQuery来执行一些地方的简写代码。如图显示：

1.2 现在来完成控制器这边的查询操作，当然还是要有数据库的存在，然后是实例化它这个模型调用。第一步是先查询出这个学院的所有数据，还有就是这个学院表是一个单表，所以他不需要任何的参数。首先是为查询学院表的这个方法给个名字，之后就是以列表的形式来接收所查询出的所有学院的数据，当然我这里是为了防止我写的时候可能会错，所以给的是个新封装好的类，这样写错了，也会有提示的。而这个类里面我给了两个值，int类型的id，string类型的text。将查询好的数据赋值给id是学院的主键ID和text的学院名称，之后返回值。如下图：

1.3 学院的下拉框数据已经查询好了，现在是来查询年级的下拉框了。同样给个名字，但是这次需要传学院的主键ID了，因为学院是年级的父元素，他们之间有关联，所以需要学院的ID。而查询时需要加上where，来确定判断的年级表的外键学院ID是否等同于传来的学院ID值相等呢？最后同样是将查询好的年级id和名称赋值给新id和text，之后返回值。如下图：

1.4 现在学院和年级这两个爷父元素已经查询得到数据了，最后只剩下子元素班级了，而班级需要传的值是它的父元素年级的ID，所以传的就是年级ID，然后就是判断年级ID那边是否有值，或者是否等于0。如果大于0，那就是有值，班级的那个下拉框就会得到值。如无值，那么就是年级重新选择数据，班级就要跟着重新变更数据。学院变换，年级刷新。年级变换，班级刷新。如下图：

1.5 现在控制器这边就已经全部完成了下拉框的数据查询操作了，最后就是回到视图这边来调用他们，但是重复的代码有点多了，所以我又将它们封装成一个方法来调用，括号里面是写进他们的id和url链接，接下来是提交方法，第一个是先清空，第二个是给下拉框加多一个选项，第三个是调用控制器那边所查好的数据用来填充id和text，而这个就是在页面上显示在下来框的数据。如下图：

1.6 最后就是调用这个方法，来实现下来框绑定数据。填充方法括号里面的id和链接。先调用appendOption()将学院的下拉框绑定好数据，然后就是年级的下拉框，先用JQuery的简写获取到年级ID，再获取到学院的页面显示内容，然后调用填充id和url。而班级也是一样，先获取到自己班级的ID，再获取年级的页面内容，再调用填充值，不过年级和班级还要拼接它的父元素ID值这样才行，而链接地址的开头一定要加“/”，如不加，就会出错。最后将这个方法再放到页面加载就能给我显示内容。如下图：