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

一、HTML代码

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

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

二、JS代码

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

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

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

new Option(text,value)

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

三、Jquery获取选中值

获取选中的value

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

获取选中的text

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

四、JavaScript获取选中值

(1)获得下拉列表

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

(2)获得选中项索引

var index = projectInfo.selectedIndex

(3)获得选中项value或text

projectInfo.options[index].value;

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. legend2---开发日志4(常用的链接传值方式有哪些)

    legend2---开发日志4(常用的链接传值方式有哪些) 一.总结 一句话总结:常用的其实就是get和post,不过有具体细分 a标签 post表单 js方式拼接url 1.js正则尽量少匹配的符号 ...

  2. 如何修改Sublime Text3 的侧边栏字体大小

    如何修改Sublime Text3 的侧边栏字体大小 一.总结 一句话总结:用PackageResourceViewer插件来修改 PackageResourceViewer插件 1.如果Sublim ...

  3. 用C#实现多种方式播放Wav声音

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. linux文件管理之管道与重定向

    ============================================================== 内容提要: 输入输出重定向.管道: 重定向的作用: 文件描述符 0 1 2 ...

  5. Windows 上安装 Scala

    在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了. 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法. 接下来,我们可以从 S ...

  6. 手机中SN、MEID、IMEI的意思

    SN SN码是Serial Number的缩写,有时也叫SerialNo,也就是产品序列号,产品序列是为了验证“产品的合法身份”而引入的一个概念,它是用来保障用户的正版权益,享受合法服务的:一套正版的 ...

  7. HashMap的两种排序方式

    Map<String, Integer> map = new HashMap<String, Integer>();map.put("d", 2);map. ...

  8. 『TensorFlow』SSD源码学习_其五:TFR数据读取&数据预处理

    Fork版本项目地址:SSD 一.TFR数据读取 创建slim.dataset.Dataset对象 在train_ssd_network.py获取数据操作如下,首先需要slim.dataset.Dat ...

  9. Appium移动自动化测试(一)----Appium的安装

    前言: 我的环境为win10 64,安装过程请根据自己的电脑环境而定. 一.Appium安装 1.Appium官方网站:http://appium.io/下载windows版本的Appium; Eas ...

  10. Oracle 基本操作--数据类型、修改和删除表、增删改查和复制表

    一.Oracle基础数据类型:数据类型: 创建数据表时,设计数据表的结构问题,也就是设计及确定数据表中各个列的数据类型,是数值.字符.日期还是图像等其他类型. 因为只有设计好数据表结构,系统才会在磁盘 ...