Java:下拉列表绑定后台数据

时间:2023-01-13 23:53:02

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

Java:下拉列表绑定后台数据

一、HTML代码

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

Java:下拉列表绑定后台数据

<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&period;net 前台绑定后台变量方法总结:&lt&semi;&percnt;&equals; &percnt;&gt&semi; 和&lt&semi;&percnt;&num; &percnt;&gt&semi;的区别

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

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

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

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

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

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

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

  5. &lbrack;ASP&period;NET&rsqb; 前台代码绑定后台变量方法总结 &lbrack;转&rsqb;

    原文链接: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. Atitit 软件工程概览attilax总结

    Atitit 软件工程概览attilax总结 1.1. .2 软件工程的发展 进一步地,结合人类发展史和计算机世界演化史来考察软件工程的发展史. 表2 软件工程过程模型 表2将软件工程的主要过程模型做 ...

  2. 月四 周2 ii

    今日通过色鸟鸟 以此纪念 不是很想玩红鸟鸟 简单来说因为红鸟鸟结束后,五彩斑斓系列就和我没关系了= = 珍惜为每一部作品感伤的每一刻吧

  3. AS3 从外部SWF中获取资源的方法(ApplicationDomain的使用)

    package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Loader; ...

  4. sql事务和锁

    摘自:http://www.cnblogs.com/lxconan/archive/2011/10/20/sql_transaction_n_locks_1.html 最近在项目中进行压力测试遇到了数 ...

  5. java的异常处理简介

    异常概述 任何一种程序设计语言设计的程序在运行时都有可能出现错误,例如除数为0,数组下标越界,要读写的文件不存在等等. 捕获错误最理想的是在编译期间,但有的错误只有在运行时才会发生. 对于这些错误,一 ...

  6. 【Netty】ChannelHandler和codec

    一.前言 前面学习了Netty的codec框架,下面接着学习ChannelHandler与codec之间的关联. 二.ChannelHandler和codec Netty为不同的协议提供了处理器和编解 ...

  7. APP自动化框架LazyAndroid使用手册(1)--框架简介

    作者:cryanimal  QQ:164166060 APP自动化简介 APP自动化,即通过自动化的方式,对APP施行一系列的仿按键输入.触摸屏输入.手势输入等操作,以达到对APP的功能进行自动化测试 ...

  8. python json&period;dumps&lpar;&rpar;函数输出json格式,使用indent参数对json数据格式化输出

    在python中,要输出json格式,需要对json数据进行编码,要用到函数:json.dumps json.dumps() :是对数据进行编码 #coding=gbkimport json dict ...

  9. mysql5&period;7 参数记录 (持续更新)

    sync_binlog 控制数据库的binlog刷到磁盘 默认sync_binlog=1,表示每次事务提交,MySQL都会把binlog刷下去,是最安全但是性能损耗最大的设置. sync_binlog ...

  10. python---RabbitMQ(3)exchange中关键字发送direct(组播)

    设置关键字,交换机根据消费者传递的关键字判断是否与生产者的一致,一致则将数据传递给消费者 可以实现对消息分组 生产者: # coding:utf8 # __author: Administrator ...