下拉框绑定数据

╰半橙微兮° 2022-02-04 11:49 358阅读 0赞

## 下拉框绑定数据 ##

下面我们要在VS（使用版本为：Visual Studio 2015）中完成下拉框绑定数据。  
![在这里插入图片描述][20190507172217815.png]  
![在这里插入图片描述][20190507172224627.png]  
首先写一个简单的下拉框，css样式用的是插件（layui.css和bootstrap.min.css），然后回到控制器定义一个方法，SelectAcademe（方法名称）是我们要查询的学院数据.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]  
Var 声明一个变量，myModel.SYS\_Academe是在数据库模型中的学院表查询数据  
Select new 是查询具体的字段，AcademeID = tb.AcademeID 查询学院ID，AcademeName = tb.AcademeName查询学院名称。最后通过return返回值。  
![在这里插入图片描述][20190507172300341.png]  
回到视图HTML部分，我们要来请求这个方法，在这里我用的是JQuery来请求。  
$.get(“/collegeinfor/selectacademe”)通过路径请求SelectAcademe。通过data接收list返回的值，最后用console.log()控制台输出data，看数据是否有输出，启动页面在控制台有数据出现则获取成功。  
![在这里插入图片描述][20190507172314522.png]  
![在这里插入图片描述][20190507172321699.png]  
通过ID：sltA传递数据，获取AcademeID和AcademeName的第一项数据，启动页面后可以看见数据添加成功。  
$("\#sltA").append("" + data\[0\].AcademeName + “”);  
这样做只能添加一条数据，而在一些较大的项目中添加数据，显得微不足道，为了能够一次性添加全部数据，这里我们用到了for 循环。变量i的长度等于data的长度，for (var i = 0; i < data.length; i++)数据每循环一次就追加一次。再次启动页面查看数据，这时数据就添加上来了，下拉框就成功绑定了。（除了for循环，还有一个each方法，效果一样，较简洁，使用较多！）  
![在这里插入图片描述][20190507172340657.png]  
![在这里插入图片描述][20190507172347151.png]  
![在这里插入图片描述][20190507172353258.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70 1]

（注：以上代码图片来源于授课老师！！！仅供参考，感谢支持！）

[20190507172217815.png]: /images/20220204/36eab6e66fdb424a9a31eb911c0fc13e.png
[20190507172224627.png]: /images/20220204/cbb972fbd139400194792f43ae563e00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]: /images/20220204/13c21f7d69784ac79f55bc15cedb3a79.png
[20190507172300341.png]: /images/20220204/982ef41312854d9eb2016a21a9445e2b.png
[20190507172314522.png]: /images/20220204/b27446f355344c569e3571c519be3d63.png
[20190507172321699.png]: /images/20220204/aa07b8ddd6234ff0a4e800affd02907e.png
[20190507172340657.png]: /images/20220204/a06a9bf7d4b245ccbbec08466a86143d.png
[20190507172347151.png]: /images/20220204/1baa0974d18c4946bf42d7632f08eed4.png
[20190507172353258.png]: /images/20220204/f202549aa41844adb74a30646411e4f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70 1]: /images/20220204/ca75f57466794686972f5571a313ba5a.png