后台传进来一个List集合,存着某对象集合,将其显示在下拉列表

一、HTML代码

页面有个下拉列表,如图所示:

  1. <td style="width:30%">
  2. <select id="projectInfo">
  3. <option value="-1">请选择</option>
  4. </select>
  5. </td>

二、JS代码

将每个对象的名字和对应ID都绑定在下拉列表,页面显示其名字,后台我们又能通过其id对其进行操作

  1. function displayProject(obj){
  2. var selector = document.getElementById("projectInfo");
  3. for(var i=;i<obj.length;i++){
  4. var option = new Option(obj[i].projectName, obj[i].id);
  5. selector.options.add(option);
  6. }
  7. }

(obj:就是后台传来的List对象集合)

new Option(text,value)

text:指定option对象的text属性(即<option></option>之间的文字)
value:指定option对象的value属性

三、Jquery获取选中值

获取选中的value

  1. $('#projectInfo option:selected').val();

获取选中的text

  1. $('#projectInfo option:selected').text();

四、JavaScript获取选中值

(1)获得下拉列表

  1. var projectInfo=document.getElementById("projectInfo");

(2)获得选中项索引

  1. var index = projectInfo.selectedIndex

(3)获得选中项value或text

  1. projectInfo.options[index].value;
  2.  
  3. projectInfo.options[index].text;

Java:下拉列表绑定后台数据的更多相关文章

  1. asp.net 前台绑定后台变量方法总结:<%= %> 和<%# %>的区别

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教.  一 ...

  2. ASP.NET WebForm中前台代码如何绑定后台变量

    转载自 http://www.cnblogs.com/lerit/archive/2010/10/22/1858007.html 经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有& ...

  3. ASP.NET前台代码绑定后台变量方法总结

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

  4. 转:ASP.NET前台代码绑定后台变量方法总结

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

  5. [ASP.NET] 前台代码绑定后台变量方法总结 [转]

    原文链接:https://www.cnblogs.com/lerit/archive/2010/10/22/1858007.html 经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般 ...

  6. Javaweb项目-下拉列表显示后台数据库的数据

    下面将演示前端下拉列表显示后台数据库中class表的说有班级的名称 环境: Tomcat-8.5.40 mysql-8.0.13 eclipse-4.9.0 springmvc框架 一.从mysql中 ...

  7. html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  8. Java语言实现通过Ajax抓取后台数据及图片

    1.Java语言实现通过Ajax抓取后台数据及图片信息 1.1数据库设计: create table picture( pic_id number not null, pic_name )not nu ...

  9. 【POI】java服务生成List数据集合,后台服务生成xlsx临时文件,并将临时文件上传到腾讯云上

    场景: java服务生成List数据集合,后台服务生成xlsx临时文件,并将临时文件上传到腾讯云上 今日份代码: 1.先是一个变量,作为文件名 private static final String ...

随机推荐

  1. 牛客OI周赛4-提高组 C 战争(war)

    战争(war) 思路: 二分答案, 找到第一个不满足条件的位置 首先对于一个值来说, 所有这个值的区间肯定有交区间, 然后在这个交区间内不能出现比它小的数 所以我们check时从大的值开始考虑, 求出 ...

  2. Robot Framework 三种测试用例模式

    1.三种测试用例模式 关键字驱动(keyword-driver).数据驱动(data-driver).行为驱动模式(behavior-driver) 2.关键字驱动(keyword-driver)   ...

  3. Redis持久化AOF和RDB对比

    RDB持久化 AOF持久化 全量备份,一次保存整个数据库 增量备份,一次保存一个修改数据库的命令 保存的间隔较长 保存的间隔默认一秒 数据还原速度快 数据还原速度一般 save会阻塞,但bgsave或 ...

  4. idea javamaven项目 连接sqlserver 数据库方法

    这里用的是c3p0连接数据库 1.pom文件写法: <!-- 数据库连接池 --> <dependency> <groupId>com.mchange</gr ...

  5. ubuntu无法关机,卡死

    (1)第一种方法(可行,但开关机出现命令行代码) $ sudo vim /etc/default/grub 将GRUB_CMDLINE_LINUX_DEFAULT="quiet splash ...

  6. php oracle数据库NCOLB字段ORA-01704

    php oracle数据库NCOLB字段ORA-01704 对clob更新  ORA-01704: 字符串文字太长 解决办法:把字符赋值给一个变量,然后赋值update语句 declarev_clob ...

  7. WPF:数据和行为

    如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种不同的数据并通过UI界面展现出来,然 ...

  8. 20171114xlVba选定单行记录并打印

    Public Sub PrintSelectRow() Dim Wb As Workbook Dim iSht As Worksheet Dim rSht As Worksheet Dim pSht ...

  9. Mysql更改表名大小写不敏感

    编辑配置文件 vi /etc/my.cnf 在[mysqld]后添加添加 lower_case_table_names=1 重启服务 service mysqld stop service mysql ...

  10. 3.numpy_array数组

    官方文档:www.numpy.org.cn Numpy 数组及其索引 先导入numpy: from numpy import * 产生数组 从列表产生数组: lst = [0, 1, 2, 3] a ...