后台传进来一个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. HTML第三章总结

    在这一章节中,主要讲了 HTML 中众多的 element,element 就像在建筑房屋时候的材料,它可以分为两种: Block Element Inline ElementBlock Elemen ...

  2. springmvc: 普通list数据输出json

    springmvc: 普通list数据输出json 加入json依赖 <dependency> <groupId>com.fasterxml.jackson.core</ ...

  3. 荧光激活细胞分选( FACS)

    全称:fluorescence-activated cell sorting 参考: 利用荧光激活细胞分选技术获取荧光蛋白标记肾小球足细胞 荧光激活细胞分离技术在角膜缘干细胞研究中的应用 [求助]急! ...

  4. 20170912多线程Python爬取图片

    import threading #导入线程 from urllib import request #导入网页请求模块 import re #导入正则表达式模块 import os # 引入模块 fr ...

  5. Confluence 6 配置边栏链接

    选择图标来显示或者隐藏,页面(pages),博客页面(blogs),快捷键(shortcuts )或者导航选项(navigation options).例如,如果你希望i的这个公开主要用于博客用途,你 ...

  6. use . adb . get wifi

    adb shell 连接手机获取root权限,如果返回的字符串中不包含root字样,再输入su命令回车 继续输入cat /data/misc/wifi/*.conf命令,将会把文件打印出来 ssid表 ...

  7. Fox And Dinner CodeForces - 510E (最大流)

    大意: n只狐狸, 要求分成若干个环, 每个环的狐狸不少于三只, 相邻狐狸年龄和为素数. 狐狸年龄都>=2, 那么素数一定为奇数, 相邻必须是一奇一偶, 也就是一个二分图, 源点向奇数点连容量为 ...

  8. 『C++』STL容器入门

    最近在学习opencv,因为C++基础很烂,所以遇到了不少问题,其中STL模块也是没少接触,特此简单了解一下STL的容器类型(主要是Vector)和迭代器的简单用法. C++ STL(标准模板库)是一 ...

  9. centos7-jdk快速安装

    安装之前先检查一下系统有没有自带open-jdk 命令: rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没有输入信息表示没有安装. ...

  10. Redis(window版本)安装及使用

    1.打开redis官网http://redis.io/点击Download 2.往下拉,找到Windows,由图片中的文字可以看出Redis项目不正式支持Windows. 但是,Microsoft开放 ...