- 要为绑定页面上的下拉框绑定数据,我们就要知道,我们需要知道我们要绑定哪些数据,这些数据从哪里来,还有数据要绑定在哪里,在这里我们是绑定在下拉框里面 。
- 现在,我要往歌手这个下拉框去绑定歌手信息,而我的数据是在SQL server数据库中的,如图所示,
- 现在我只需要两个字段,一个是歌手ID,另一个是歌手名称所以我要在控制器中我用landa语句去查询所要绑定的数据,具体代码图所示
查询得到的值是下图所示
我们可以看到,返回回去的列表有两个值,分别是id,和text。因此执行完这个方法得到的是这些数据。
所以在视图(页面)上去请求这个方法就可以获取数据了。
获取数据可以用Jquery的post方法异步提交的方法来获取
我们首先要异步请求指定路径的方法,什么的路径是控制器的名称,执行完成返回的数据我用一个jsonData来接收,然后jsonData就包含了控制器那边返回回来的所有数据。
要在每次绑定下拉框之前,我们要对下拉框进行子元素的清空,保证数据不会一直累加
然后设置默认的第一项,第一项的value值为0,内容为“---请选择---”。然后遍历返回数组的内容,有多少条数据创建多少个option标签,然后创建出的标签的value值是返回回来的id值来赋值,内容是返回回来的text也就是歌手名称。这样一来就可以下拉框的数据就绑定完成了,效果如图所示。
扫描二维码关注公众号,回复:
6166804 查看本文章
当我选择选择”本兮“时,下拉框的选中的是
<option value="12">' + "本兮" + '</option>'
可以看到此时的value值和歌手名称是对应的,也就是说是跟数据库一一对应的
这样一来,我们就可以获取下拉框的value来标识数据的唯一性,这样绑定下拉框的值可以用来作用于查询,新增,修改的获取数据id的用途。
当我们的数据是确定或者很少并且固定不变的时候,就可以用下拉框来绑定,比如一个
我们国家省份是固定的,当我们用下拉框来录入数据是,我们选择用下拉框的进行选择。
而不是用输入框,如图所示
在新增的弹出框,我只用3个下拉框即可以完成数据选择,而不用手写进去,大大提高了效率。所以下拉框的使用方便了输入数据的麻烦。