页面绑定下拉框方法

  1. 要为绑定页面上的下拉框绑定数据,我们就要知道,我们需要知道我们要绑定哪些数据,这些数据从哪里来,还有数据要绑定在哪里,在这里我们是绑定在下拉框里面 。
  2. 现在,我要往歌手这个下拉框去绑定歌手信息,而我的数据是在SQL server数据库中的,如图所示,
  3. 现在我只需要两个字段,一个是歌手ID,另一个是歌手名称所以我要在控制器中我用landa语句去查询所要绑定的数据,具体代码图所示

查询得到的值是下图所示

我们可以看到,返回回去的列表有两个值,分别是id,和text。因此执行完这个方法得到的是这些数据。

所以在视图(页面)上去请求这个方法就可以获取数据了。

获取数据可以用Jquery的post方法异步提交的方法来获取

我们首先要异步请求指定路径的方法,什么的路径是控制器的名称,执行完成返回的数据我用一个jsonData来接收,然后jsonData就包含了控制器那边返回回来的所有数据。

要在每次绑定下拉框之前,我们要对下拉框进行子元素的清空,保证数据不会一直累加

然后设置默认的第一项,第一项的value值为0,内容为“---请选择---”。然后遍历返回数组的内容,有多少条数据创建多少个option标签,然后创建出的标签的value值是返回回来的id值来赋值,内容是返回回来的text也就是歌手名称。这样一来就可以下拉框的数据就绑定完成了,效果如图所示。

当我选择选择”本兮“时,下拉框的选中的是

<option value="12">' + "本兮" + '</option>'

可以看到此时的value值和歌手名称是对应的,也就是说是跟数据库一一对应的

这样一来,我们就可以获取下拉框的value来标识数据的唯一性,这样绑定下拉框的值可以用来作用于查询,新增,修改的获取数据id的用途。

 

 

 

当我们的数据是确定或者很少并且固定不变的时候,就可以用下拉框来绑定,比如一个

我们国家省份是固定的,当我们用下拉框来录入数据是,我们选择用下拉框的进行选择。

而不是用输入框,如图所示

在新增的弹出框,我只用3个下拉框即可以完成数据选择,而不用手写进去,大大提高了效率。所以下拉框的使用方便了输入数据的麻烦。

 

猜你喜欢

转载自blog.csdn.net/qq_44540112/article/details/89955008